/*
* Switch component
*
*/

@import '../../../style/core/utilities.scss';

.dnb-switch {
  --switch-width--medium: 2.5rem;
  --switch-height--medium: 1.5rem;
  --switch-width--large: 3.25rem;
  --switch-height--large: 2rem;
  --switch-border-width--medium: 0.0625rem;
  --switch-border-width--large: 0.125rem;

  display: inline-flex;
  flex-direction: column;

  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);

  &__inner {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;

    font-size: var(--font-size-basis);
  }

  &__shell {
    position: relative;
    display: flex;
    align-items: center;

    user-select: none; // Safari / Touch fix
  }

  &--large {
    line-height: var(--switch-height--large);
  }

  &--large &__shell {
    height: var(--switch-height--large);
  }

  &__row {
    display: inline-flex;
    align-items: center;

    height: var(--switch-height--medium);
  }

  &__focus,
  &__button {
    position: absolute;
    z-index: 4;

    border-radius: 50%;
  }

  &__button {
    left: 0;

    width: var(--switch-height--medium);
    height: var(--switch-height--medium);

    background-color: lightgrey;
    border: var(--switch-border-width--medium) solid transparent;

    transition: transform 160ms ease-out 125ms;

    .dnb-switch--large & {
      width: var(--switch-height--large);
      height: var(--switch-height--large);

      border-width: var(--switch-border-width--large);
    }
  }

  &__focus {
    display: none;
    position: absolute;
    z-index: 2;

    width: 100%;
    height: 100%;

    @include focusRing();
  }

  /*
    * When switched OFF
    * aka when the switch is not :checked
    */
  &__input:not(:checked) ~ &__button {
    transform: translateX(0);
    transform: translateX(
      calc(1px - 1px - var(--switch-border-width--medium))
    );
  }

  /*
  * When switched ON
  * aka when the switch is :checked
  */
  &__input:checked ~ &__button {
    transform: translateX(1rem);
    transform: translateX(
      calc(
        var(--switch-width--medium) - 1.5rem +
          var(--switch-border-width--medium)
      )
    );
  }

  &--large &__input:not(:checked) ~ &__button {
    transform: translateX(
      calc(1px - 1px - var(--switch-border-width--large))
    );
  }

  &--large &__input:checked ~ &__button {
    transform: translateX(
      calc(
        var(--switch-width--large) - 2rem +
          var(--switch-border-width--large)
      )
    );
  }

  &__background {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;

    overflow: hidden;

    width: var(--switch-width--medium);
    height: calc(var(--switch-height--medium) - 0.5rem);

    background-color: grey;
    border-radius: calc(var(--switch-height--medium) - 0.5rem / 2);

    &::after {
      content: '';
      position: absolute;
      transition:
        transform 0.3s ease-out,
        position 0.3s ease-out;
    }

    .dnb-switch--large & {
      width: var(--switch-width--large);
      height: calc(var(--switch-height--large) - 0.75rem);

      border-radius: calc(var(--switch-height--large) - 0.75rem / 2);
    }
  }

  &__input {
    opacity: 0;

    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;

    display: block;

    // width: 100%;
    width: var(--switch-width--medium);
    height: var(--switch-height--medium);

    .dnb-switch--large & {
      width: var(--switch-width--large);
      height: var(--switch-height--large);
    }

    margin: 0;
    padding: 0;

    border: 0;
  }

  &__input:not([disabled]) {
    cursor: pointer;
  }

  &__input:not([disabled]):focus ~ &__background,
  &__input:not([disabled]):active ~ &__background {
    @include focusRing();
  }

  &__input:not([disabled]):focus ~ &__button &__focus,
  &__input:not([disabled]):active ~ &__button &__focus {
    display: block;
  }

  // label
  .dnb-form-label {
    padding-right: 0.5rem;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
  }

  &__order {
    display: inline-flex;
  }

  &__suffix {
    order: 4;
  }

  &--label-position-left &__suffix {
    padding-left: 1rem;
  }

  &--label-position-left &__order {
    .dnb-switch__inner {
      order: 2;
    }

    .dnb-form-label {
      order: 1;
      align-self: center;
    }

    .dnb-form-status {
      order: 3;
      margin-top: 0.5rem;
    }
  }

  &--label-position-right &__order {
    .dnb-switch__inner {
      order: 1;
    }

    .dnb-form-label {
      order: 2;
      padding-left: 0.5rem;
    }

    .dnb-form-status {
      order: 3;
      margin-top: 0.5rem;
    }
  }

  &.dnb-skeleton &__input[disabled] ~ &__button,
  &.dnb-skeleton &__input[disabled] ~ &__background::after {
    border-color: var(--skeleton-color);
  }

  &.dnb-skeleton &__input[disabled] ~ &__background {
    background-color: var(--skeleton-color);
  }

  &.dnb-skeleton
    &__input[disabled]:not(:checked)
    ~ .dnb-switch__background::after {
    content: '';
    border-color: var(--skeleton-color--contrast);
  }

  &__status--error
    &__input:not([disabled]):not(:focus):not(:active)
    ~ &__button
    &__focus {
    display: block;
    @include fakeBorder(red, var(--focus-ring-width, 0.125rem));
  }

  &__status--error
    &__input:not([disabled]):not(:focus):not(:active)
    ~ &__background {
    background-color: tomato;
    @include fakeBorder(red, var(--focus-ring-width, 0.125rem));
  }

  // Edge fix
  @include IS_EDGE() {
    // fix are a problem with transition and complex transforms
    &__input:not(:checked) ~ &__button {
      transform: translateX(0);
    }

    // fix are a problem with transition and complex transforms
    &__input:checked ~ &__button {
      transform: translateX(calc(var(--switch-width--medium) - 1.5rem));
    }
  }
}