// @import '../var.scss';
$indicatorOffset: 2px;

.switch-btn-group {
  // padding: 3px 4px;
  // background-color: #fff;
  border-radius: 20px;
  background-color: #f1f1f1;
  // background-color: $themeColor;
  border: 1px solid #ededed;
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(#000, 0.05);
  .indicator {
    position: absolute;
    // top: $indicatorOffset;
    // bottom: $indicatorOffset;
    left: 0;
    height: 100%;
    // margin: $indicatorOffset;
    // width: 33%;
    // height: 1px;
    background-color: $themeColor;
    // background-color: #FFF;
    transition: all 0.2s ease;
    border-radius: 20px;
    // border-top: 1px solid darken($themeColor, 5%);
    box-shadow: inset 0 1px 1px rgba(#000, 0.1);
  }
  .switch-btn {
    padding: 3px 16px;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    color: #666;
    // color: #FFF;
    display: inline-block;
    z-index: 1;
    position: relative;
    transition: color 0.2s ease;
    &.active {
      // background-color: #FFF !important;
      // background-color: $themeColor !important;
      // color: #666 !important;
      color: #FFF !important;
      // color: $themeColor !important;
      // color: darken($blue, 15%) !important;
      // border-radius: 1px;
      // box-shadow: 0 0 1px 1px rgba($themeColor, 0.5) !important;
    }
    &:hover {
      // background-color: #f7f7f7;
      // box-shadow: inset 0 2px 6px rgba(#000, 0.1);
      color: $themeColor;
    }
    &[disabled] {
      // background-color: #CCC;
      // display: none;
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}