.tabs {
  @apply flex relative mx-auto;
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
}

.tabs--slider {
  @apply bg-grey-light rounded-full;
  padding: .125rem;
  max-width: max-content;
}

.tabs--bar {
  @apply shadow-top;
  outline: 2px solid white;
}

.tabs__item {
  z-index: 2;
  cursor: pointer;
}

.tabs__item--active {
  @apply text-blue;
}

.tabs--slider .tabs__item:not(.tabs__item--active) {
  @apply text-grey-dark;
}

.tabs__item,
.tabs__slider {
  @apply text-xs py-2 px-8 no-tap-highlight text-center;
  user-select: none;
  box-sizing: border-box;
}

.tabs--slider .tabs__item,
.tabs--slider .tabs__slider {
  @apply font-semibold;
}

.tabs--bar .tabs__item:not(.tabs__item--active) {
  @apply text-grey;
}

.tabs--bar .tabs__item-icon svg {
  fill: currentColor;
  height: 24px;
  width: 24px;
}

.tabs--bar .tabs__item--active.tabs__item-icon svg {
}

.tabs__slider {
  @apply bg-white rounded-full text-transparent absolute;
  z-index: 1;
  overflow: auto;
}