$switch-name: $lib-name + "-switch";
$switch-border-color: $disabled-text-color-light;
$switch-background-color: $background-color-base;
$switch-time: $transition-time;
$switch-text-color: $title-color-dark;
$switch-checked-color: $primary-color;
$switch-color-disabled: $background-color-disabled;

.#{$switch-name} {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  .innerClasses {
    position: relative;
    display: inline-block;
    background: $switch-border-color;
    cursor: pointer;
    transition: all $switch-time;
    user-select: none;
    vertical-align: middle;
    &:after {
      position: absolute;
      top: 2px;
      background: $switch-background-color;
      content: " ";
      cursor: pointer;
      transition: all $switch-time;
    }
    .switch-inner {
      position: absolute;
      display: flex;
      align-items: center;
      color: $switch-text-color;
    }
    &.is-checked {
      background: $switch-checked-color;
    }
  }

  @at-root {
    #{&}--default {
      .innerClasses {
        width: 36px;
        height: 18px;
        border-radius: 9px;
        &:after {
          left: 2px;
          width: 14px;
          height: 14px;
          border-radius: 7px;
        }
        .switch-inner {
          right: 5px;
          height: 18px;
          font-size: 12px;
        }
        &.is-checked {
          .switch-inner {
            left: 5px;
          }
          &:after {
            left: 20px;
          }
        }
      }
    }

    #{&}--small {
      .innerClasses {
        width: 28px;
        height: 14px;
        border-radius: 7px;
        &:after {
          left: 1px;
          width: 10px;
          height: 10px;
          border-radius: 5px;
        }
        .switch-inner {
          right: 3px;
          height: 14px;
          font-size: 12px;
        }
        &.is-checked {
          .switch-inner {
            left: 3px;
          }
          &:after {
            left: 17px;
          }
        }
      }
    }

    #{&}--large {
      .innerClasses {
        width: 56px;
        height: 22px;
        border-radius: 11px;
        &:after {
          left: 2px;
          width: 18px;
          height: 18px;
          border-radius: 9px;
        }
        .switch-inner {
          right: 10px;
          height: 22px;
          font-size: 14px;
        }
        &.is-checked {
          .switch-inner {
            left: 10px;
          }
          &:after {
            left: 36px;
          }
        }
      }
    }

    #{&}--disabled {
      .innerClasses {
        &.is-disabled {
          cursor: not-allowed;
          background: $switch-color-disabled;
          &:after {
            cursor: not-allowed;
          }
          &.is-checked {
            background: lighten($color: $switch-checked-color, $amount: 36)
          }
        }
      }
    }
  }
}