@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;
@use './baseline/baseline.scss' as baseline;

$classname: '#{utils.$prefix}-toggle';
// Color variables
$color-checked: tokens.$color-interface-interaction;
$color-unchecked: tokens.$color-neutral-grey-300;
$color-border: tokens.$color-neutral-grey-600;
// Size variables
$width-small: tokens.$spacing-base-11;
$height-small: tokens.$spacing-base-6;
$width-medium: tokens.$spacing-base-13;
$height-medium: tokens.$spacing-base-7;
$size-slider-small: tokens.$spacing-base-4;
$size-slider-medium: tokens.$spacing-base-5;
$padding-label: tokens.$spacing-base-2;

.#{$classname} {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;

  & input.#{$classname}__input {
    cursor: pointer;
    // Hide browser-default checkmark appearance
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;

    // Focus outline
    &:focus {
      outline: none;
    }
    &:focus-visible ~ .#{$classname}__label {
      @include baseline.focus-outline();
    }
    // Compatibility for browsers not supporting :focus-visible (Safari, IE)
    &:focus ~ .#{$classname}__label {
      @include baseline.focus-outline();
    }
    &:focus:not(:focus-visible) ~ .#{$classname}__label {
      outline: none;
    }
  }
  &__label,
  &__decoupled-label-left,
  &__decoupled-label-right {
    overflow-wrap: anywhere;
    @include typography.text-body-400();
    color: tokens.$color-text-background-light;
    transition: color tokens.$duration-normal;
  }
  &__label {
    display: flex;
    align-items: center;
    position: relative;

    padding-left: $width-medium;
    min-height: $height-medium;

    cursor: pointer;
    &--right {
      padding-left: $width-medium + $padding-label;
    }
    &--left {
      padding-left: 0;
      padding-right: $width-medium + $padding-label;
    }

    &--toggle-on {
      color: $color-border;
    }
    &--toggle-off {
      color: tokens.$color-text-background-light;
    }
  }
  &__decoupled-label-left {
    padding-right: $padding-label;
  }
  &__decoupled-label-right {
    padding-left: $padding-label;
  }

  & .#{$classname}__label {
    // Toggle button container
    &::before {
      content: '';
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      left: 0;

      width: $width-medium;
      height: $height-medium;

      background-color: $color-unchecked;
      border: tokens.$border-width-default solid $color-border;
      border-radius: tokens.$border-radius-medium;

      transition: tokens.$duration-normal;
      transition-property: background-color, border-color;
    }
    &--left::before {
      left: auto;
      right: 0;
    }

    // Toggle button slider
    &::after {
      content: '';
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      left: tokens.$spacing-base-1;

      width: $size-slider-medium;
      height: $size-slider-medium;
      border-radius: 50%;

      background-color: tokens.$color-neutral-white;
      border: tokens.$border-width-default solid $color-border;

      transition: tokens.$duration-normal;
      transition-property: left, right, border-color;
    }
    &--left::after {
      left: auto;
      right: tokens.$spacing-base-7;
    }
  }

  &--small & {
    &__label,
    &__decoupled-label-left,
    &__decoupled-label-right {
      @include typography.text-body-300();
    }

    &__label {
      min-height: $height-small;
      &--right {
        padding-left: $width-small + $padding-label;
      }
      &--left {
        padding-right: $width-small + $padding-label;
      }
    }

    &__label::before {
      width: $width-small;
      height: $height-small;
    }
    &__label::after {
      width: $size-slider-small;
      height: $size-slider-small;
    }
    &__label--left::after {
      right: tokens.$spacing-base-6;
    }
  }

  // Checked states
  & input.#{$classname}__input:checked {
    & ~ .#{$classname}__label--toggle-on {
      color: tokens.$color-text-background-light;
    }
    & ~ .#{$classname}__label--toggle-off {
      color: $color-border;
    }
    // Checked toggle button container
    & ~ .#{$classname}__label::before {
      background-color: $color-checked;
      border-color: $color-checked;
    }
    // Checked toggle button slider
    & ~ .#{$classname}__label::after {
      border-color: tokens.$color-neutral-white;
    }

    // Checked toggle button slider reposition
    & ~ .#{$classname}__label:not(.#{$classname}__label--left)::after {
      left: tokens.$spacing-base-7;
    }
    & ~ .#{$classname}__label--left::after {
      right: tokens.$spacing-base-1;
    }
  }
  // Checked small toggle button slider reposition
  &.#{$classname}--small input.#{$classname}__input:checked {
    & ~ .#{$classname}__label:not(.#{$classname}__label--left)::after {
      left: tokens.$spacing-base-6;
    }
  }
}