@use "components/form/input/mixins";
@use "system/colors";
@use "system/typography";
@use "system/icon-map";
@use "system/spacing";
@use "sass:map";

@mixin switch-states() {
  &:hover,
  &--hover {
    border-color: colors.$blue-state;
  }

  &--hover &__background,
  &--hover &__label-text,
  &--hover &__slider,
  &:hover &__background,
  &:hover &__label-text,
  &:hover &__slider {
    border-color: colors.$blue-state;
    color: colors.$blue-state;
  }

  &--focus
  &:focus-within {
    border: 0.125rem solid colors.$blue-state;
  }

  &--focus &__label-text
  &__input:focus ~ &__label-text {
    color: colors.$blue-state;
  }

  &--focus &__slider,
  &__input:focus ~ &__slider {
    border-color: colors.$blue-state;
  }

  &__input:checked ~ &__background {
    background: colors.$blue-dark none repeat scroll 0 0;
  }

  &--focus &__background,
  &__input:focus-visible ~ &__background {
    transition: none;
    border: 0.125rem solid colors.$blue-state;
    outline: 0.25rem solid colors.$purple-light;
  }

  &__input:checked ~ &__slider {
    left: 12px;
  }

  &__input:checked ~ &__slider::before {
    content: map.get(icon-map.$icons, "check");
  }

  &--disabled,
  &__input:disabled ~ &__background,
  &__input:disabled ~ &__slider,
  &--disabled:hover {
    background: colors.$grayscale-10 none repeat scroll 0 0;
    border-color: colors.$grayscale-40;
  }

  &__input:disabled ~ &__label-text,
  &__input:disabled ~ &__slider::before {
    color: colors.$grayscale-40;
  }

  &__input:disabled:checked ~ &__background {
    background: colors.$grayscale-40 none repeat scroll 0 0;
  }

  &--error {
    @extend %ods-margin-bottom-1;

    border: 2px solid colors.$red;
  }

  &--error .ods-switch__input:checked ~ .ods-switch__background {
    background: colors.$red-30 none repeat scroll 0 0 !important;
  }

  &--error &__slider {
    border-color: colors.$red;
    color: colors.$red;
  }

  &--error &__label-text {
    border-color: colors.$blue-dark;
    color: colors.$blue-dark;
  }
}

.ods-switch {
  background-color: colors.$white;
  border-radius: 1.125rem;
  border: 0.125rem solid colors.$blue-dark;
  cursor: pointer;
  display: block;
  font-weight: 500;
  height: 1.688rem;
  @extend %ods-margin-bottom-3;

  position: relative;
  width: 2.563rem;

  &__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
  }

  &__background {
    border-radius: inherit;
    display: block;
    height: 1.5rem;
    position: relative;
    transition: all 0.15s ease-out 0s;
  }

  &__label-text {
    border: none;
    left: 2.688rem;
    position: absolute;
    top: 0;
    white-space: nowrap;
  }

  &__slider {
    background-color: colors.$white;
    border: 0.125rem solid colors.$blue-dark;
    border-radius: 0.813rem;
    height: 1.625rem;
    left: -0.125rem;
    position: absolute;
    top: -0.063rem;
    transition: left 0.15s ease-out 0s;
    width: 1.688rem;
  }

  &__slider::before {
    background-color: colors.$white;
    border-radius: 0.375rem;
    content: "";
    font-family: "Oslo Icons", Arial, Helvetica, sans-serif;
    @extend %ods-text--size-bravo;

    font-style: normal;
    height: 0;
    left: 50%;
    line-height: 1.5em;
    margin: -1.875rem 0 0 -1.188rem;
    position: absolute;
    top: 50%;
    width: 0;
  }

  @include switch-states;

  &__error-message {
    @include mixins.error-message;
  }
}