@switchlist-prefix: ~'@{prefix}switch-list';
.@{switchlist-prefix} {
  display: inline-block;
  vertical-align: middle;
  > .h-switch-list-span {
    padding: 8px 15px;
    border-radius: 0;
    color: inherit;
    font-size: @font-size-mini;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
    transition: all @transition-time;
    background-color: #fff;
    border: @border;
    float: left;
    + span {
      margin-left: -1px;
    }
    position: relative;
    &:hover {
      z-index: 2;
      color: @primary-color;
    }
    &:first-of-type {
      border-radius: @border-radius 0 0 @border-radius;
    }
    &:last-of-type {
      border-radius: 0 @border-radius @border-radius 0;
    }
    &.h-switch-list-span-checked {
      background-color: @primary-color;
      border-color: darken(@primary-color, 2%);
      color: @white-color;
      z-index: 3;
    }
    > i {
      margin-right: 5px;
    }
  }
  &&-small > .h-switch-list-span {
    padding: 5px 8px;
  }
  &&-disabled {
    > .h-switch-list-span {
      pointer-events: painted;
      cursor: @disabled-cursor;
      border-color: @disabled-border-color;
      color: inherit;
      background-color: @disabled-background-color;
      &[checked] {
        background-color: @disabled-border-color;
      }
    }
  }
}