.root {
  @apply relative w-full h-full select-none;
  overflow: hidden;
}

.slider {
  @apply relative h-full transition-opacity duration-150;
  opacity: 0;
}

.slider.show {
  opacity: 1;
}

.thumb {
  @apply transition-transform transition-colors
  ease-linear duration-75 overflow-hidden inline-block
  cursor-pointer h-full;
  width: 125px;
  width: calc(100% / 3);
}

.thumb.selected {
  @apply bg-white;
}

.thumb img {
  height: 85% !important;
}

.album {
  width: 100%;
  height: 100%;
  @apply bg-violet-dark;
  box-sizing: content-box;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  height: 125px;
  scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.album::-webkit-scrollbar {
  display: none;
}

@screen md {
  .thumb:hover {
    transform: scale(1.02);
    background-color: rgba(255, 255, 255, 0.08);
  }

  .thumb.selected {
    @apply bg-white;
  }

  .album {
    height: 182px;
  }
  .thumb {
    width: 235px;
  }
}