/* ============================================================================
   DGA checkbox states
   ----------------------------------------------------------------------------
   default : unchanged (whatever the base stylesheet already renders)
   hover   : #14573a
   pressed : #104631
   focus   : default fill, plus a 2px #161616 ring with a 4px gap and 2px radius

   Link this AFTER the base stylesheet in every layout that renders checkboxes:
     - Views/layoutV2.cshtml            (after style-bundle(.rtl).css)
     - Views/_Layout.cshtml             (after styles.min.css)
   The two layouts ship different checkbox systems - style-bundle uses
   `input[type=checkbox]` / `.select-option input[type=checkbox]`, the older
   styles.css uses Bootstrap's `.form-check-input` - so both are covered below.

   Nothing here is written into style-bundle(.rtl).css or styles(.min).css:
   those are build output. These selectors mirror the base ones, so source
   order alone is enough to win - no !important, no specificity inflation.
   ========================================================================== */

/* ------------------------------------------------------------------ hover -- */

input[type=checkbox]:hover:not(:disabled),
.form-check-input[type=checkbox]:hover:not(:disabled),
.form-check-input:hover:not(:disabled),
.ideation-form__checkbox-input:hover:not(:disabled),
.select-option input[type=checkbox]:hover:not(:disabled) {
    border-color: #14573a;
}

input[type=checkbox]:hover:not(:disabled):checked,
.form-check-input[type=checkbox]:hover:not(:disabled):checked,
.form-check-input:hover:not(:disabled):checked,
.ideation-form__checkbox-input:hover:not(:disabled):checked,
.select-option input[type=checkbox]:hover:not(:disabled):checked {
    background-color: #14573a;
    border-color: #14573a;
}

/* ---------------------------------------------------------------- pressed -- */

input[type=checkbox]:active:not(:disabled),
.form-check-input[type=checkbox]:active:not(:disabled),
.form-check-input:active:not(:disabled),
.ideation-form__checkbox-input:active:not(:disabled),
.select-option input[type=checkbox]:active:not(:disabled) {
    border-color: #104631;
}

input[type=checkbox]:active:not(:disabled):checked,
.form-check-input[type=checkbox]:active:not(:disabled):checked,
.form-check-input:active:not(:disabled):checked,
.ideation-form__checkbox-input:active:not(:disabled):checked,
.select-option input[type=checkbox]:active:not(:disabled):checked {
    background-color: #104631;
    border-color: #104631;
}

/* ------------------------------------------------------------------ focus -- */
/* The fill stays exactly as it is - only the ring is added.
   `position: relative` is required because the base sheets set it on
   hover/active only, and the ring is anchored to the box. */

input[type=checkbox]:focus,
input[type=checkbox]:focus-visible,
.form-check-input[type=checkbox]:focus,
.form-check-input[type=checkbox]:focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible,
.ideation-form__checkbox-input:focus,
.ideation-form__checkbox-input:focus-visible,
.select-option input[type=checkbox]:focus,
.select-option input[type=checkbox]:focus-visible {
    position: relative;
    outline: none;
    box-shadow: none;
}

/* A pseudo-element rather than outline / box-shadow: both of those grow their
   corner radius by the offset or spread, so a 4px gap would render the 2px
   radius as 6px.

   100% resolves against the box's padding area, so `+ 14px` is
   2 x (1px border + 4px gap + 2px ring). That keeps the 4px gap exact on the
   24px style-bundle checkbox and on the 16px Bootstrap one alike, instead of
   hardcoding a size that only suits one of them. */
input[type=checkbox]:focus::after,
input[type=checkbox]:focus-visible::after,
.form-check-input[type=checkbox]:focus::after,
.form-check-input[type=checkbox]:focus-visible::after,
.form-check-input:focus::after,
.form-check-input:focus-visible::after,
.ideation-form__checkbox-input:focus::after,
.ideation-form__checkbox-input:focus-visible::after,
.select-option input[type=checkbox]:focus::after,
.select-option input[type=checkbox]:focus-visible::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    box-sizing: border-box;
    border: 2px solid #161616;
    border-radius: 2px;
    pointer-events: none;
}

/* =========================================================== dropdown row -- */
/* The multi-select dropdown option (`<label class="select-option">` in
   Views/Partials/V2/Shared/_multiSelect.cshtml) carries its own states:
     default : transparent
     hover   : #f3f4f6
     pressed : #e5e7eb
     focus   : 2px #161616 border around the row

   Focus lands on the checkbox inside the label, so the row reacts with
   :focus-within — and the checkbox's own ring is suppressed here, so only one
   outline shows at a time. */

/* The 2px border is always present, just transparent until focus, and the
   padding drops by the same 2px - so the row does not change size or nudge
   the list when it gains the outline. (base: padding 10px 14px, no border) */
.select-dropdown .select-option {
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: background-color .2s ease, border-color .15s ease;
}

.select-dropdown .select-option:hover {
    background-color: #f3f4f6;
}

.select-dropdown .select-option:active {
    background-color: #e5e7eb;
}

.select-dropdown .select-option:focus-within {
    border-color: #161616;
}

/* one ring at a time: inside a dropdown row the row shows the focus, not the box */
.select-dropdown .select-option input[type=checkbox]:focus::after,
.select-dropdown .select-option input[type=checkbox]:focus-visible::after {
    content: none;
}

/* The dropdown checkbox is 16px rather than the 24px used in forms.
   The base sheet centres its tick with `padding: 7.13px 6px 7.75px` +
   `background-origin: content-box`, which is tuned for 24px and would push the
   tick out of a 16px box - so the tick is centred here instead of inset, and
   scaled to match. */
.select-dropdown .select-option input[type=checkbox] {
    width: 16px;
    height: 16px;
    padding: 0;
    background-origin: border-box;
    background-position: center;
    background-size: 10px 8px;
}

/* The base sheet floats a 40px grey circle behind the box on hover/press.
   At 16px that halo is far larger than the box, and the row already carries
   its own hover and pressed backgrounds - so it is dropped inside dropdowns. */
.select-dropdown .select-option input[type=checkbox]:hover:not(:disabled)::before,
.select-dropdown .select-option input[type=checkbox]:active:not(:disabled)::before {
    content: none;
}

/* Dropdown checkboxes are neutral, not brand green:
     unchecked : #161616 border
     checked   : #0d121c fill
   Hover and pressed are pinned to the same values on purpose - inside a
   dropdown the ROW shows those states (background above), so the box itself
   stays constant rather than darkening twice. */
.select-dropdown .select-option input[type=checkbox],
.select-dropdown .select-option input[type=checkbox]:hover:not(:disabled),
.select-dropdown .select-option input[type=checkbox]:active:not(:disabled) {
    border-color: #161616;
}

.select-dropdown .select-option input[type=checkbox]:checked,
.select-dropdown .select-option input[type=checkbox]:hover:not(:disabled):checked,
.select-dropdown .select-option input[type=checkbox]:active:not(:disabled):checked {
    background-color: #0d121c;
    border-color: #0d121c;
}

/* ============================================================== form hint -- */
/* Lives in this file because it is the one hand-written stylesheet already
   linked after the bundles in both layouts - the rule itself has nothing to do
   with checkboxes. If more non-checkbox overrides land here, split them into a
   dga-overrides.css and link it alongside this one.

   help-circle icon before the hint text, 8px gap. Markup is unchanged:
   Views/Partials/V2/_AddNewIdeaForm.cshtml:70
     <span class="form-text ideation-form__hint">@AppResources.PhoneExample</span>

   The icon is a mask rather than an <img> so it inherits the hint's colour -
   which is the same #384250 already baked into the source SVG - instead of
   being pinned to it. */

.ideation-form__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ideation-form__hint::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("/images/icons/help-circle.svg") center/16px 16px no-repeat;
    mask: url("/images/icons/help-circle.svg") center/16px 16px no-repeat;
}