/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/input-label-focus" as *;
@use "../../common/hide-input" as *;
@use "../../common/hyphenation" as *;
@use "../../common/text-rendering" as *;

.ams-checkbox__input {
  @include hide-input;
  @include input-label-focus;
}

// Default
.ams-checkbox__label {
  color: var(--ams-checkbox-color);
  cursor: var(--ams-checkbox-cursor);
  display: inline-flex;
  font-family: var(--ams-checkbox-font-family);
  font-size: var(--ams-checkbox-font-size);
  font-weight: var(--ams-checkbox-font-weight);
  gap: var(--ams-checkbox-gap);
  line-height: var(--ams-checkbox-line-height);
  outline-offset: var(--ams-checkbox-outline-offset);

  @include hyphenation;
  @include text-rendering;
}

.ams-checkbox__icon-container {
  block-size: var(--ams-checkbox-icon-container-block-size);
  display: flex;
  flex: none;
  inline-size: var(--ams-checkbox-icon-container-inline-size);
}

.ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-fill);
  stroke: var(--ams-checkbox-rectangle-stroke);
}

.ams-checkbox__hover-indicator {
  stroke: none;
}

.ams-checkbox__checked-indicator {
  display: none;
  stroke: var(--ams-checkbox-checked-indicator-stroke);
}

.ams-checkbox__indeterminate-indicator {
  display: none;
  stroke: var(--ams-checkbox-indeterminate-indicator-stroke);
}

// Default hover
.ams-checkbox__label:hover {
  color: var(--ams-checkbox-hover-color);
  text-decoration-line: underline;
  text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
  text-underline-offset: 0.375rem;

  .ams-checkbox__rectangle {
    stroke: var(--ams-checkbox-rectangle-hover-stroke);
  }

  .ams-checkbox__hover-indicator {
    stroke: var(--ams-checkbox-hover-indicator-hover-stroke);
  }
}

// Invalid
.ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label {
  .ams-checkbox__rectangle {
    stroke: var(--ams-checkbox-rectangle-invalid-stroke);
  }
}

// Indeterminate
.ams-checkbox__input:indeterminate + .ams-checkbox__label {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-fill);
  }

  .ams-checkbox__indeterminate-indicator {
    display: block;
  }
}

// Disabled
.ams-checkbox__input:disabled + .ams-checkbox__label {
  color: var(--ams-checkbox-disabled-color);
  cursor: var(--ams-checkbox-disabled-cursor);

  .ams-checkbox__rectangle {
    stroke: var(--ams-checkbox-rectangle-disabled-stroke);
  }

  .ams-checkbox__hover-indicator {
    stroke: none;
  }
}

// Checked
.ams-checkbox__input:checked:not(:indeterminate) + .ams-checkbox__label {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-fill);
  }

  .ams-checkbox__checked-indicator {
    display: block;
  }
}

// Invalid checked
.ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-invalid-fill);
  }
}

// Invalid indeterminate
.ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-fill);
  }
}

// Disabled checked
.ams-checkbox__input:disabled:checked + .ams-checkbox__label {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-disabled-fill);
  }
}

// Disabled indeterminate
.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-fill);
  }
}

// HOVER

// Checked hover
.ams-checkbox__input:checked + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-hover-fill);
  }
}

// Indeterminate hover
.ams-checkbox__input:indeterminate + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-hover-fill);
  }
}

// Invalid hover
.ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    stroke: var(--ams-checkbox-rectangle-invalid-hover-stroke);
  }

  .ams-checkbox__hover-indicator {
    stroke: var(--ams-checkbox-hover-indicator-invalid-hover-stroke);
  }
}

// Disabled invalid hover
.ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    stroke: var(--ams-checkbox-rectangle-hover-disabled-invalid-stroke);
  }
}

// Disabled checked hover
.ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-disabled-hover-fill);
  }
}

// Disabled indeterminate hover
.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-hover-fill);
  }
}

// Disabled hover
.ams-checkbox__input:disabled + .ams-checkbox__label:hover {
  text-decoration: none;

  .ams-checkbox__hover-indicator {
    stroke: none;
  }
}

// Invalid checked hover
.ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-invalid-hover-fill);
  }
}

// Invalid indeterminate hover
.ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill);
  }
}

// Disabled invalid checked hover
.ams-checkbox__input[aria-invalid="true"]:disabled:checked + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-hover-disabled-invalid-fill);
  }
}

// Disabled invalid indeterminate hover
.ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate + .ams-checkbox__label:hover {
  .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill);
  }
}

// FORCED COLORS

// Default
@media (forced-colors: active) {
  .ams-checkbox__label,
  .ams-checkbox__label:hover,
  .ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label,
  .ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label:hover {
    .ams-checkbox__rectangle {
      fill: Canvas;
      stroke: FieldText;
    }

    .ams-checkbox__hover-indicator {
      stroke: none;
    }
  }
}

// Checked
@media (forced-colors: active) {
  .ams-checkbox__input:checked:not(:indeterminate) + .ams-checkbox__label,
  .ams-checkbox__input:checked + .ams-checkbox__label:hover,
  .ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label,
  .ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label:hover {
    .ams-checkbox__rectangle {
      fill: ActiveText;
      stroke: ActiveText;
    }

    .ams-checkbox__checked-indicator {
      stroke: Canvas;
    }
  }
}

// Indeterminate
@media (forced-colors: active) {
  .ams-checkbox__input:indeterminate + .ams-checkbox__label,
  .ams-checkbox__input:indeterminate + .ams-checkbox__label:hover,
  .ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label,
  .ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label:hover {
    .ams-checkbox__rectangle {
      fill: ActiveText;
      stroke: ActiveText;
    }

    .ams-checkbox__indeterminate-indicator {
      stroke: Canvas;
    }
  }
}

// Disabled
@media (forced-colors: active) {
  .ams-checkbox__input:disabled + .ams-checkbox__label,
  .ams-checkbox__input:disabled + .ams-checkbox__label:hover,
  .ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label,
  .ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label:hover {
    .ams-checkbox__rectangle {
      stroke: GrayText;
    }
  }
}

// Disabled checked
@media (forced-colors: active) {
  .ams-checkbox__input:disabled:checked + .ams-checkbox__label,
  .ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover,
  .ams-checkbox__input[aria-invalid="true"]:disabled:checked + .ams-checkbox__label:hover {
    .ams-checkbox__rectangle {
      fill: GrayText;
      stroke: GrayText;
    }
  }
}

// Disabled indeterminate
@media (forced-colors: active) {
  .ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label,
  .ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover,
  .ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate + .ams-checkbox__label:hover {
    .ams-checkbox__rectangle {
      fill: GrayText;
    }
  }
}