/**
 * @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-radio__input {
  @include hide-input;
  @include input-label-focus;
}

// Default
.ams-radio__label {
  color: var(--ams-radio-color);
  cursor: var(--ams-radio-cursor);
  display: inline-flex;
  font-family: var(--ams-radio-font-family);
  font-size: var(--ams-radio-font-size);
  font-weight: var(--ams-radio-font-weight);
  gap: var(--ams-radio-gap);
  line-height: var(--ams-radio-line-height);
  outline-offset: var(--ams-radio-outline-offset);
  text-decoration-thickness: var(--ams-radio-text-decoration-thickness);
  text-underline-offset: var(--ams-radio-text-underline-offset);

  @include hyphenation;
  @include text-rendering;
}

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

.ams-radio__circle {
  fill: var(--ams-radio-circle-fill);
  stroke: var(--ams-radio-circle-stroke);
}

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

.ams-radio__checked-indicator {
  display: none;
  fill: var(--ams-radio-checked-indicator-fill);
}

// Default hover
.ams-radio__label:hover {
  color: var(--ams-radio-hover-color);
  text-decoration-line: var(--ams-radio-hover-text-decoration-line);

  .ams-radio__circle {
    stroke: var(--ams-radio-circle-hover-stroke);
  }

  .ams-radio__hover-indicator {
    stroke: var(--ams-radio-hover-indicator-hover-stroke);
  }

  .ams-radio__checked-indicator {
    fill: var(--ams-radio-checked-indicator-hover-fill);
  }
}

// Invalid
.ams-radio__input[aria-invalid="true"] + .ams-radio__label {
  .ams-radio__circle {
    stroke: var(--ams-radio-circle-invalid-stroke);
  }

  .ams-radio__checked-indicator {
    fill: var(--ams-radio-checked-indicator-invalid-fill);
  }
}

// Checked
.ams-radio__input:checked + .ams-radio__label {
  .ams-radio__checked-indicator {
    display: block;
  }
}

// Disabled
.ams-radio__input:disabled + .ams-radio__label {
  color: var(--ams-radio-disabled-color);
  cursor: var(--ams-radio-disabled-cursor);

  .ams-radio__circle {
    stroke: var(--ams-radio-circle-disabled-stroke);
  }

  .ams-radio__checked-indicator {
    fill: var(--ams-radio-checked-indicator-disabled-fill);
  }
}

// Disabled invalid
.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label {
  .ams-radio__circle {
    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
    stroke: var(--ams-radio-circle-disabled-invalid-stroke);
  }

  .ams-radio__checked-indicator {
    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
    fill: var(--ams-radio-checked-indicator-disabled-invalid-fill);
  }
}

// HOVER

// Disabled hover
.ams-radio__input:disabled + .ams-radio__label:hover {
  text-decoration: none;

  .ams-radio__hover-indicator {
    stroke: transparent;
  }
}

// Invalid hover
.ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
  .ams-radio__circle {
    stroke: var(--ams-radio-circle-invalid-hover-stroke);
  }

  .ams-radio__hover-indicator {
    stroke: var(--ams-radio-hover-indicator-invalid-hover-stroke);
  }

  .ams-radio__checked-indicator {
    fill: var(--ams-radio-checked-indicator-invalid-hover-fill);
  }
}

// Disabled invalid hover
.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover {
  .ams-radio__circle {
    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
    stroke: var(--ams-radio-circle-disabled-invalid-hover-stroke);
  }

  .ams-radio__hover-indicator {
    stroke: transparent;
  }
  .ams-radio__checked-indicator {
    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
    fill: var(--ams-radio-checked-indicator-disabled-invalid-hover-fill);
  }
}

// FORCED COLORS

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

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

    .ams-radio__checked-indicator {
      fill: FieldText;
    }
  }
}

// Checked
@media (forced-colors: active) {
  .ams-radio__input:checked + .ams-radio__label,
  .ams-radio__input[aria-invalid="true"]:checked + .ams-radio__label:hover {
    .ams-radio__circle {
      stroke: ActiveText;
    }

    .ams-radio__checked-indicator {
      fill: ActiveText;
    }
  }
}

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

    .ams-radio__checked-indicator {
      fill: GrayText;
    }
  }
}