switch.pcss

.switch {
  @apply py-5;
}

.switch__item {
  @apply bg-grey-150 cursor-pointer px-5 py-2 mr-2 mb-2 font-alt font-normal text-black text-center text-lg;

  &:hover {
    @apply no-underline bg-grey-200;
  }

  &.switch__item--active,
  &.switch__item--active:hover {
    @apply bg-turquoise-200;
  }
}

@responsive {

  @screen xl {
    .switch__item {
      @apply px-8 py-4 text-xl;
    }
  }

}
/* HORIZONTAL SCROLLABLE */
.horizontal-scrolling {
  display: block;
  margin-left: -15px;
  margin-right: -15px;
  max-width: calc(100% + 30px);
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 0 15px;
  text-align: center;
  white-space: nowrap;
}
.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;
}