@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;

//Usable vars
$_gap: vars.$cds-spacing-25;
$_dot_diameter: vars.$cds-size-100;
$_switch_height: $_gap + $_dot_diameter + $_gap;
$_switch_width: vars.$cds-size-250;

$_cds-toggle-border-radius: var(--cds-toggle-br) !default;

//Classes
.cds-toggle {
  display: inline-flex;
  align-items: center;

  & input {
    display: none;
  }

  &__text {
    flex: none;
    padding: 0 vars.$cds-spacing-50;
    @include mixins.cds-paragraph-m;
  }

  &__switch {
    box-sizing: content-box;
    cursor: pointer;
    border-radius: $_cds-toggle-border-radius;
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--cds-color-background-deep);
    //border: 1px solid var(--cds-color-background-deep);

    /* DEFAULT */
    width: $_switch_width;
      height: $_gap + $_dot_diameter + $_gap;

    &:before {
      content: '';
      display: block;
      border-radius: calc($_cds-toggle-border-radius - $_gap);
      background-color: var(--cds-color-text-subtle);
      transition: vars.$cds-transition-default ease;

      /* DEFAULT */
      width: $_dot_diameter;
      height: $_dot_diameter;
      margin: $_gap;
    }

    &:hover {
      background-color: var(--cds-color-background-deep--hover);
      border-color: var(--cds-color-background-deep--hover);

      &:before {
        background-color: var(--cds-color-text-subtle);
      }
    }
  }

  & input:checked+&__switch {
    background-color: var(--cds-color-accent-primary-main);
    border-color: var(--cds-color-accent-primary-main);

    &:before {
      transform: translateX($_switch_width - $_switch_height);
      background-color: var(--cds-color-text-inverse);
    }

    &:hover {
      background-color: var(--cds-color-accent-primary-main--hover);
      border-color: var(--cds-color-accent-primary-main--hover);

      &:before {
        background-color: var(--cds-color-text-inverse);
      }
    }
  }

  & input:disabled+&__switch {
    pointer-events: none !important;
    background-color: var(--cds-color-background-medium);
    border-color: var(--cds-color-background-medium);

    &:before {
      background-color: var(--cds-color-text-muted);
    }
  }

  & input:checked:disabled+&__switch {
    pointer-events: none !important;
    background-color: var(--cds-color-text-muted);
    border-color: var(--cds-color-text-muted);

    &:before {
      background-color: var(--cds-color-text-inverse);
    }
  }

  //SIZE MODIFIERS
  &--medium {
    $_gap: vars.$cds-spacing-25;
    $_dot_diameter: vars.$cds-size-100;
    $_switch_height: $_gap + $_dot_diameter + $_gap;
    $_switch_width: vars.$cds-size-250;

    .cds-toggle__switch {
      width: $_switch_width;
      height: $_gap + $_dot_diameter + $_gap;

      &:before {
        width: $_dot_diameter;
        height: $_dot_diameter;
        margin: $_gap;
      }
    }

    input:checked+.cds-toggle__switch:before {
      transform: translateX($_switch_width - $_switch_height);
    }
  }

  &--large {
    $_gap: vars.$cds-spacing-25;
    $_dot_diameter: vars.$cds-size-200;
    $_switch_height: $_gap + $_dot_diameter + $_gap;
    $_switch_width: vars.$cds-size-450;

    .cds-toggle__switch {
      width: $_switch_width;
      height: $_gap + $_dot_diameter + $_gap;

      &:before {
        width: $_dot_diameter;
        height: $_dot_diameter;
        margin: $_gap;
      }
    }

    input:checked+.cds-toggle__switch:before {
      transform: translateX($_switch_width - $_switch_height);
    }
  }

}