@import “../vars.scss”;

.sk-tabs {

width: 100%;
border-bottom: 1px solid $sk-border-color;
list-style: none;
padding: 0;
margin: 4px 0;

&.is-disabled {
  display:none;
}

&-option {
  cursor:pointer;
  display: inline-block;
  font-weight: $sk-medium-weight;
  font-size:$sk-list-font-size;
  color: $sk-action-text-color;
  padding: 10px 15px;
  text-decoration: none;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-radius: $sk-border-radius $sk-border-radius 0 0;

  &.is-active {
    background-color: white;
    color:$sk-list-text-color;
    border-color:$sk-active-bg-color;
    cursor: default;
    border: 1px solid $sk-border-color;
    border-bottom-color: transparent;
  }

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

  &__text, &__count {
    display: inline;
  }

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

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

}