/**
 * Switch Style
 */


.at-switch {
  position: relative;
  display: inline-block;
  min-width: $switch-min-width-base;
  height: $switch-height-base;
  border: 1px solid $switch-border-color;
  border-radius: $switch-border-radius-base;
  background-color: $switch-bg-color;
  vertical-align: middle;
  transition: all .3s;
  user-select: none;
  cursor: pointer;

  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    top: 1px;
    width: $switch-circle-size-base;
    height: $switch-circle-size-base;
    border-radius: 50%;
    background-color: $switch-circle-bg-color;
    transition: all .3s;
    cursor: pointer;
  }

  /* element */
  &__text {
    display: block;
    padding-left: $switch-circle-size-base + 6;
    padding-right: 6px;
    color: $switch-font-color;
    font-size: $switch-font-size-base;
    line-height: $switch-height-base - 2;
  }

  /* modifier */
  &--checked {
    border-color: $switch-border-color-checked;
    background-color: $switch-bg-color-checked;

    &::after {
      left: 100%;
      margin-left: -$switch-circle-size-base - 1;
    }
    .at-switch__text {
      padding-left: 6px;
      padding-right: $switch-circle-size-base + 6;
    }
  }
  &--disabled {
    border-color: $switch-border-color-disabled;
    background-color: $switch-bg-color-disabled;
    cursor: $cursor-disabled;

    &::after {
      background-color: $switch-circle-bg-color-disabled;
      cursor: $cursor-disabled;
    }
    .at-switch__text {
      color: $switch-font-color-disabled;
    }
  }
  &--small {
    min-width: $switch-min-width-sm;
    height: $switch-height-sm;

    &::after {
      width: $switch-circle-size-sm;
      height: $switch-circle-size-sm;
    }
    .at-switch__text {
      font-size: $switch-font-size-sm;
      padding-left: $switch-circle-size-sm + 4;
      padding-right: 4px;
      line-height: $switch-height-sm - 2;
    }
    &.at-switch--checked {
      &::after {
        left: 100%;
        margin-left: -$switch-circle-size-sm - 1;
      }
      .at-switch__text {
        padding-left: 4px;
        padding-right: $switch-circle-size-sm + 4;
      }
    }
  }
  &--large {
    min-width: $switch-min-width-lg;
    height: $switch-height-lg;

    &::after {
      width: $switch-circle-size-lg;
      height: $switch-circle-size-lg;
    }
    .at-switch__text {
      font-size: $switch-font-size-lg;
      padding-left: $switch-circle-size-lg + 6;
      padding-right: 6px;
      line-height: $switch-height-lg - 2;
    }
    &.at-switch--checked {
      &::after {
        left: 100%;
        margin-left: -$switch-circle-size-lg - 1;
      }
      .at-switch__text {
        padding-left: 6px;
        padding-right: $switch-circle-size-lg + 6;
      }
    }
  }
}