@import “../vars.scss”;

.sk-toggle {

display: flex;
align-content:center;
text-align: center;
border-radius: $sk-border-radius;
max-height:30px;

&.is-disabled {
  display:none;
}

&-option {
  flex:1;
  background-color: $sk-selector-background;
  border:1px solid $sk-selector-border-color;
  cursor:pointer;
  font-weight: $sk-medium-weight;
  font-size:$sk-list-font-size;
  color: $sk-selector-text-color;
  padding:5px 10px;
  border-right:none;
  text-decoration: none;
  white-space: nowrap;

  &:first-child {
    border-radius: $sk-border-radius 0 0 $sk-border-radius;
  }

  &:last-child {
    border-radius: 0 $sk-border-radius $sk-border-radius 0;
    border-right:1px solid $sk-selector-border-color;
  }

  &.is-active {
    background-color:$sk-selector-active-background;
    color:$sk-selector-active-text-color;
    border-color:$sk-selector-active-background;
  }

  &.is-disabled {
    cursor: initial;
    color: $sk-disabled-text-color;
  }

  &__text, &__count {
    display: inline;
  }

  &__count {
    &:before {
      content: " ("
    }

    &:after {
      content: ")"
    }
  }
}

}