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

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

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

.ams-switch__label {
  --ams-switch-track-border-width: var(--ams-border-width-m);

  background-color: var(--ams-switch-background-color);

  // Using a transparent border to make sure the component is visible in forced colors mode.
  border: var(--ams-switch-track-border-width) solid transparent;
  border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
  box-sizing: border-box;
  cursor: var(--ams-switch-cursor);
  display: inline-block;
  inline-size: var(--ams-switch-inline-size);
  outline-offset: var(--ams-switch-outline-offset);
  transition: background-color 0.2s ease-in-out;
  vertical-align: middle;
}

.ams-switch__label::before {
  background-color: var(--ams-switch-thumb-background-color);
  block-size: var(--ams-switch-thumb-block-size);
  border-radius: 50%;
  content: "";
  display: block;
  inline-size: var(--ams-switch-thumb-inline-size);
  transition-duration: 0.1s;
  transition-property: box-shadow, transform;
  transition-timing-function: ease-in-out;

  @media (forced-colors: active) {
    background-color: FieldText;
  }
}

.ams-switch__input:checked + .ams-switch__label {
  background-color: var(--ams-switch-checked-background-color);
}

.ams-switch__input:disabled + .ams-switch__label {
  background-color: var(--ams-switch-disabled-background-color);
  cursor: var(--ams-switch-disabled-cursor);
}

.ams-switch__input:checked + .ams-switch__label::before {
  transform: translate(calc(100% - 2 * var(--ams-switch-track-border-width)));
}

.ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
  box-shadow: var(--ams-switch-thumb-hover-box-shadow);
}