/*
  Rail Design System — Checkbox Component
  ============================================================

  Uses --checkbox-size token: 20px at comfortable, 18px at compact.

  Example markup:

  <!-- Single checkbox (unchecked) -->
  <label class="rail-checkbox">
    <input class="rail-checkbox__input" type="checkbox" />
    <span class="rail-checkbox__box" aria-hidden="true"></span>
    <span class="rail-checkbox__label">Accept terms and conditions</span>
  </label>

  <!-- Checked -->
  <label class="rail-checkbox">
    <input class="rail-checkbox__input" type="checkbox" checked />
    <span class="rail-checkbox__box" aria-hidden="true"></span>
    <span class="rail-checkbox__label">Subscribe to newsletter</span>
  </label>

  <!-- Disabled unchecked -->
  <label class="rail-checkbox rail-checkbox--disabled">
    <input class="rail-checkbox__input" type="checkbox" disabled />
    <span class="rail-checkbox__box" aria-hidden="true"></span>
    <span class="rail-checkbox__label">Unavailable option</span>
  </label>

  <!-- Disabled checked -->
  <label class="rail-checkbox rail-checkbox--disabled">
    <input class="rail-checkbox__input" type="checkbox" checked disabled />
    <span class="rail-checkbox__box" aria-hidden="true"></span>
    <span class="rail-checkbox__label">Already applied</span>
  </label>

  <!-- Error -->
  <label class="rail-checkbox rail-checkbox--error">
    <input class="rail-checkbox__input" type="checkbox" aria-invalid="true" />
    <span class="rail-checkbox__box" aria-hidden="true"></span>
    <span class="rail-checkbox__label">You must accept to continue</span>
  </label>

  <!-- Group -->
  <fieldset class="rail-checkbox-group">
    <legend class="rail-checkbox-group__legend">Dietary Preferences</legend>
    <label class="rail-checkbox">
      <input class="rail-checkbox__input" type="checkbox" />
      <span class="rail-checkbox__box" aria-hidden="true"></span>
      <span class="rail-checkbox__label">Vegetarian</span>
    </label>
    <label class="rail-checkbox">
      <input class="rail-checkbox__input" type="checkbox" />
      <span class="rail-checkbox__box" aria-hidden="true"></span>
      <span class="rail-checkbox__label">Vegan</span>
    </label>
    <label class="rail-checkbox">
      <input class="rail-checkbox__input" type="checkbox" />
      <span class="rail-checkbox__box" aria-hidden="true"></span>
      <span class="rail-checkbox__label">Gluten-free</span>
    </label>
  </fieldset>
*/


/* ------------------------------------------------------------
   Single checkbox — wrapper
   ------------------------------------------------------------ */

.rail-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-inline-sm);
  cursor: pointer;
  position: relative;
  min-height: var(--target-min);
}


/* ------------------------------------------------------------
   Native input (visually hidden, stays accessible)
   ------------------------------------------------------------ */

.rail-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ------------------------------------------------------------
   Custom box
   ------------------------------------------------------------ */

.rail-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: var(--checkbox-size);
  height: var(--checkbox-size);

  background-color: var(--surface-raised);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Checkmark (shown when checked) */
.rail-checkbox__box::after {
  content: '';
  display: none;
  width: calc(var(--checkbox-size) * 0.35);
  height: calc(var(--checkbox-size) * 0.6);
  border: solid var(--text-on-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}


/* ------------------------------------------------------------
   Label text
   ------------------------------------------------------------ */

.rail-checkbox__label {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  color: var(--text-primary);
  /* Align label baseline with the box center */
  padding-top: 1px;
}


/* ------------------------------------------------------------
   States — Hover
   ------------------------------------------------------------ */

.rail-checkbox:hover .rail-checkbox__box {
  border-color: var(--border-strong);
}


/* ------------------------------------------------------------
   States — Focus
   ------------------------------------------------------------ */

.rail-checkbox__input:focus-visible ~ .rail-checkbox__box {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-ring-offset);
}


/* ------------------------------------------------------------
   States — Checked
   ------------------------------------------------------------ */

.rail-checkbox__input:checked ~ .rail-checkbox__box {
  background-color: var(--interactive-default);
  border-color: var(--interactive-default);
}

.rail-checkbox__input:checked ~ .rail-checkbox__box::after {
  display: block;
}

.rail-checkbox:hover .rail-checkbox__input:checked ~ .rail-checkbox__box {
  background-color: var(--interactive-hover);
  border-color: var(--interactive-hover);
}


/* ------------------------------------------------------------
   States — Disabled (unchecked)
   ------------------------------------------------------------ */

.rail-checkbox--disabled,
.rail-checkbox:has(.rail-checkbox__input:disabled) {
  cursor: not-allowed;
}

.rail-checkbox__input:disabled ~ .rail-checkbox__box {
  background-color: var(--surface-subtle);
  border-color: var(--border-subtle);
}

.rail-checkbox__input:disabled ~ .rail-checkbox__label {
  color: var(--text-disabled);
}

.rail-checkbox--disabled:hover .rail-checkbox__box,
.rail-checkbox:has(.rail-checkbox__input:disabled):hover .rail-checkbox__box {
  border-color: var(--border-subtle);
}


/* ------------------------------------------------------------
   States — Disabled (checked)
   ------------------------------------------------------------ */

.rail-checkbox__input:checked:disabled ~ .rail-checkbox__box {
  background-color: var(--interactive-disabled);
  border-color: var(--interactive-disabled);
}

.rail-checkbox__input:checked:disabled ~ .rail-checkbox__box::after {
  border-color: var(--text-disabled);
}


/* ------------------------------------------------------------
   States — Error
   ------------------------------------------------------------ */

.rail-checkbox--error .rail-checkbox__box {
  border-color: var(--border-error);
}

.rail-checkbox--error .rail-checkbox__label {
  color: var(--text-error);
}

.rail-checkbox--error:hover .rail-checkbox__box {
  border-color: var(--border-error);
}


/* ------------------------------------------------------------
   Group
   ------------------------------------------------------------ */

.rail-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  border: none;
  padding: 0;
  margin: 0;
}

.rail-checkbox-group__legend {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
  color: var(--text-primary);
  padding: 0;
  margin-bottom: var(--space-stack-sm);
}