:host {
  @apply grid relative;
  min-height: 40px;
  grid-template-columns: auto 1fr auto;
}

.ui-slider-wrapper {
  @apply flex overflow-scroll items-center;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

.prev-wrapper,
.next-wrapper {
  @apply absolute hidden justify-center items-center z-popover;

  button {
    @apply rounded-full grid content-center justify-center bg-glitter text-ucla-blue border-none outline-none;
    width: 40px;
    height: 40px;
  }
}

.prev-wrapper {
  @apply top-0 left-0 bottom-0;
  background: rgb(0, 0, 0);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.7) 50%);
}

.next-wrapper {
  @apply top-0 right-0 bottom-0;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.7) 50%);
}

:host.show-slide-arrows:hover .prev-wrapper,
:host.show-slide-arrows:hover .next-wrapper {
  display: grid;
}
