/* ============================================================
   05-form-controls.css
   Custom checkbox & radio styling

   Consolidates two markup patterns into one set of rules using
   :is(). Both patterns produce the same visual result:

     Adjacent:  <input type="checkbox"> <label>Text</label>
     Wrapping:  <label><input type="checkbox"> Text</label>

   The native input is hidden; a styled ::before + ::after on
   the label renders the visible control.

   Standardized checkmark color to var(--dm-light) across both
   patterns (was inconsistent in original CSS).
   ============================================================ */

/* Hide the native input but keep it accessible */
input:where([type="radio"], [type="checkbox"]) {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Label setup (both patterns) */
:is(
  input[type="radio"] + label,
  input[type="checkbox"] + label,
  label:has(> input[type="radio"]),
  label:has(> input[type="checkbox"])
) {
  position: relative;
  padding-left: calc(16px + var(--dm-space-2xs));
  cursor: pointer;
  display: inline-block;
  line-height: 1.4;
}

/* Base outer shape — applies to both controls, both patterns */
:is(
  input[type="radio"] + label,
  input[type="checkbox"] + label,
  label:has(> input[type="radio"]),
  label:has(> input[type="checkbox"])
)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid var(--dm-border);
  background-color: var(--dm-light-l-1);
  transform: translateY(-50%);
  transition: border-color var(--dm-transition-m), background-color var(--dm-transition-m);
  box-sizing: border-box;
}

/* Radio = circular */
:is(
  input[type="radio"] + label,
  label:has(> input[type="radio"])
)::before {
  border-radius: 50%;
}

/* Checkbox = rounded square */
:is(
  input[type="checkbox"] + label,
  label:has(> input[type="checkbox"])
)::before {
  border-radius: var(--dm-border-radius-s);
}

/* Radio dot indicator */
:is(
  input[type="radio"] + label,
  label:has(> input[type="radio"])
)::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dm-primary);
  transform: translateY(-50%) scale(0);
  transition: transform var(--dm-transition-m);
}

/* Checkbox checkmark indicator (built from CSS borders rotated 45deg) */
:is(
  input[type="checkbox"] + label,
  label:has(> input[type="checkbox"])
)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--dm-light);
  border-bottom: 2px solid var(--dm-light);
  transform: translateY(-65%) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--dm-transition-m);
}

/* Checked state — radio */
:is(
  input[type="radio"]:checked + label,
  label:has(> input[type="radio"]:checked)
)::before {
  border-color: var(--dm-primary);
}

:is(
  input[type="radio"]:checked + label,
  label:has(> input[type="radio"]:checked)
)::after {
  transform: translateY(-50%) scale(1);
}

/* Checked state — checkbox */
:is(
  input[type="checkbox"]:checked + label,
  label:has(> input[type="checkbox"]:checked)
)::before {
  border-color: var(--dm-primary);
  background-color: var(--dm-primary);
}

:is(
  input[type="checkbox"]:checked + label,
  label:has(> input[type="checkbox"]:checked)
)::after {
  transform: translateY(-65%) rotate(45deg) scale(1);
}

/* Hover state */
:is(
  input[type="radio"] + label,
  input[type="checkbox"] + label,
  label:has(> input[type="radio"]),
  label:has(> input[type="checkbox"])
):hover::before {
  border-color: var(--dm-primary-l-1);
}

/* Focus-visible state for keyboard navigation */
:is(
  input[type="radio"]:focus-visible + label,
  input[type="checkbox"]:focus-visible + label,
  label:has(> input[type="radio"]:focus-visible),
  label:has(> input[type="checkbox"]:focus-visible)
)::before {
  outline: 2px solid var(--dm-primary);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Exclusion: Bricks filters in "button" mode
   These render checkboxes as pill-shaped buttons (no indicator
   needed). Hide our custom ::before/::after pseudo-elements
   and reset label padding so buttons aren't pushed right.
   ------------------------------------------------------------ */
[data-brx-filter][data-mode="button"] label {
  padding-left: 0;
}

[data-brx-filter][data-mode="button"] label::before,
[data-brx-filter][data-mode="button"] label::after {
  display: none;
}