switch.pcss

.switch {
  @apply py-5 mx-auto;
}

.switch__item {
  @apply whitespace-nowrap bg-yellow-500 cursor-pointer px-5 py-2 mb-2 font-normal text-black text-center;

  &:not(:last-child) {
    @apply mr-2;
  }

  &:hover {
    @apply no-underline bg-yellow-600;
  }

  &.switch__item--active,
  &.switch__item--active:hover {
    @apply bg-grey-150;
  }
}

@responsive {

  @screen xl {
    .switch__item {
      @apply px-5 py-2;
    }
  }

}
/* HORIZONTAL SCROLLABLE */
.horizontal-scrolling {
  display: block;
  margin-left: -15px;
  margin-right: -15px;
  max-width: calc(100vw - 50px);
  overflow-x: scroll;
  overflow-y: hidden;
  text-align: center;
  white-space: nowrap;

  @screen xl {
    max-width: calc(100% + 30px);
  }
}
.horizontal-scrolling.draggable {
  cursor: grab;
}
.horizontal-scrolling.draggable.active, .horizontal-scrolling.draggable.active a {
  cursor: grabbing;
}

.no-scrollbars {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: none;
}
.no-scrollbars::-webkit-scrollbar {
  display: none;
}