/**
 * @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 *;

// 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);
  text-decoration-thickness: var(--ams-checkbox-text-decoration-thickness);
  text-underline-offset: var(--ams-checkbox-text-underline-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);

  @media (forced-colors: active) {
    fill: Canvas;
    stroke: FieldText;
  }
}

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

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

  @media (forced-colors: active) {
    stroke: Canvas;
  }
}

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

  @media (forced-colors: active) {
    stroke: Canvas;
  }
}

/* stylelint-disable no-invalid-position-declaration */
@mixin forced-colors-selected {
  @media (forced-colors: active) {
    fill: ActiveText;
    stroke: ActiveText;
  }
}

@mixin forced-colors-disabled {
  @media (forced-colors: active) {
    fill: GrayText;
    stroke: GrayText;
  }
}
/* stylelint-enable no-invalid-position-declaration */

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

  // Disabled
  &:disabled + * {
    color: var(--ams-checkbox-disabled-color);
    cursor: var(--ams-checkbox-disabled-cursor);

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

      @media (forced-colors: active) {
        stroke: GrayText;
      }
    }
  }

  // Indeterminate
  &:indeterminate + * {
    .ams-checkbox__rectangle {
      fill: var(--ams-checkbox-rectangle-indeterminate-fill);

      @include forced-colors-selected;
    }

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

  // Checked
  &:checked:not(:indeterminate) + * {
    .ams-checkbox__rectangle {
      fill: var(--ams-checkbox-rectangle-checked-fill);

      @include forced-colors-selected;
    }

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

  // Default hover
  &:hover:not(:disabled) + * {
    color: var(--ams-checkbox-hover-color);
    text-decoration-line: var(--ams-checkbox-hover-text-decoration-line);

    .ams-checkbox__rectangle {
      @media (forced-colors: none) {
        stroke: var(--ams-checkbox-rectangle-hover-stroke);
      }
    }

    .ams-checkbox__hover-indicator {
      @media (forced-colors: none) {
        stroke: var(--ams-checkbox-hover-indicator-hover-stroke);
      }
    }
  }

  // Disabled indeterminate
  &:disabled:indeterminate + * .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-fill);

    @include forced-colors-disabled;
  }

  // Disabled checked
  &:disabled:checked + * .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-disabled-fill);

    @include forced-colors-disabled;
  }

  // Invalid
  :is(&:invalid, &[aria-invalid="true"]):not(:disabled) + * .ams-checkbox__rectangle {
    stroke: var(--ams-checkbox-rectangle-invalid-stroke);

    @include forced-colors-selected;
  }

  // Invalid indeterminate
  :is(&:invalid, &[aria-invalid="true"]):indeterminate:not(:disabled) + * .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-fill);

    @include forced-colors-selected;
  }

  // Invalid checked
  :is(&:invalid, &[aria-invalid="true"]):checked:not(:disabled) + * .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-invalid-fill);

    @include forced-colors-selected;
  }

  // HOVER

  // Indeterminate hover
  &:indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-hover-fill);

    @include forced-colors-selected;
  }

  // Checked hover
  &:checked:not(:disabled, :indeterminate) + *:hover .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-hover-fill);

    @include forced-colors-selected;
  }

  // Invalid hover
  :is(&:invalid, &[aria-invalid="true"]):not(:disabled) + *:hover {
    .ams-checkbox__rectangle {
      stroke: var(--ams-checkbox-rectangle-invalid-hover-stroke);
    }

    .ams-checkbox__hover-indicator {
      @media (forced-colors: none) {
        stroke: var(--ams-checkbox-hover-indicator-invalid-hover-stroke);
      }
    }
  }

  // Invalid indeterminate hover
  :is(&:invalid, &[aria-invalid="true"]):indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill);

    @include forced-colors-selected;
  }

  // Invalid checked hover
  :is(&:invalid, &[aria-invalid="true"]):checked:not(:disabled) + *:hover .ams-checkbox__rectangle {
    fill: var(--ams-checkbox-rectangle-checked-invalid-hover-fill);

    @include forced-colors-selected;
  }
}