@import '../../assets/styles/colors';
@import '../../assets/styles/rsfonts';

.storybook-switch-container {
  display: flex;
  align-items: center;
  &--disabled {
    opacity: 0.5;
    cursor: no-drop;
  }

  .storybook-switch-checkbox {
    height: 0;
    width: 0;
    display: none;

    &:checked {
      + .storybook-switch-label {
        .storybook-switch-button {
          left: unset;
          right: 4px;
          background: $white;
          transition: all 0.3s ease-in-out 0.3s;
        }

        &--primary,
        &--isBackgroundTransparent {
          background-color: $primary;
          border: 1px solid $primary;
        }
        &--success {
          background-color: $success;
          border: 1px solid $success;
        }
        &--danger {
          background-color: $error;
          border: 1px solid $error;
        }

        &:disabled {
          cursor: default;
          color: $grey_5;
          background: $grey_2;
          opacity: 0.4;
        }

        .label-container {
          color: $white;

          .enable {
            display: block;
          }
          .disable {
            display: none;
          }
        }

        .icon-container {
          color: $white;

          .enable {
            display: block;
            transition: all 0.1s ease;
          }
          .disable {
            display: none;
            transition: all 0.1s ease;
          }
        }
      }
    }
    &:disabled {
      cursor: no-drop;
    }
  }

  .storybook-switch-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid $grey_1;
    border-radius: 100px;
    position: relative;
    background: transparent;
    transition: background-color 0.4s ease-in 0.1s;
    color: $grey_1;

    &--isBackgroundTransparent {
      background: transparent;
      max-height: 22px;
    }
    &--disabled {
      opacity: 0.5;
      cursor: no-drop;
    }

    .storybook-switch-button {
      position: absolute;
      left: 3px;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      border-radius: 45px;
      transition: all 0.3s ease-in-out 0.3s;
      background: $grey_1;
      outline: none;
    }

    .label-container {
      margin: auto;
      display: flex;
      justify-content: space-around;
      align-items: center;

      position: relative;
      line-height: 0px;
      margin: 0;
      padding: 10px 0;
      @extend .fontPoppinsSemiboldXs;
      > p {
        margin: 0;
      }

      .enable {
        display: none;
        transition: all 0.3s ease 0.2s;
        position: relative;
        z-index: 0px;
        margin-right: 27px;
        margin-left: 8px;
      }
      .disable {
        display: block;
        transition: all 0.3s ease 0.2s;
        position: relative;
        z-index: 1px;
        margin-left: 27px;
        margin-right: 8px;
      }
    }

    .icon-container {
      @extend .label-container;

      .enable {
        display: none;
        transition: all 0.3s ease 0.2s;
        position: relative;
        z-index: 0px;
        margin-right: 27px;
        margin-left: 8px;
      }
      .disable {
        display: block;
        transition: all 0.3s ease 0.2s;
        position: relative;
        z-index: 1px;
        margin-left: 27px;
        margin-right: 8px;
      }
    }
  }

  .default,
  .with_icon {
    width: 50px;
    height: 22px;
  }

  .with_label,
  .controlled {
    min-width: 78px;
    min-height: 22px;
  }
}

.toggle-status-text {
  @extend .fontPoppinsRegularXs;

  &-enable {
    color: $primary;
    margin-left: 8px;
  }
  &-disable {
    color: $grey_1;
    margin-left: 8px;
  }
}