@import '~styles/config';

.tab {
  $tab-height: 29px;

  display: flex;

  justify-content: center;
  align-items: center;
  flex-grow: 1;

  position: relative;

  margin-bottom: -1px;

  height: $tab-height;

  border-right: 1px solid $color-zd-border;
  border-bottom: 1px solid $color-zd-border;

  background-color: $color-white;

  transition: background-color 300ms ease-in-out;

  &:last-child {
    border-right: 0;
  }

  &:hover,
  &:focus,
  &.selected {
    background-color: $color-zd-gray;
  }

  &__button {
    @include reset-button;
    @include responsive-font(14, 16);

    padding: 0 12px;

    width: 100%;
    height: $tab-height;

    cursor: pointer;

    font-family: $font-heading;
    font-weight: 500;
    font-size: 14px;

    color: $color-zd-font;
  }
}