[data-component-id="kackaamin:video_library_player"] {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 0;

  & .video-library__list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    & .video-library__list-item {
      flex: 0 0 auto;
      width: max(25%, 200px);
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;

      & .video-library__title {
        display: none;
        margin-top: 10px;
        margin-left: 12px;
        font-size: 12px;
        line-height: 150%;
        text-align: start;
      }

      & .video-library__thumbnail {
        overflow: hidden;
        position: relative;
        border-radius: 16px;
        display: block;
        aspect-ratio: 200/112.5;
        cursor: pointer;

        & img {
          filter: brightness(50%);
          aspect-ratio: 200/112.5;
          object-fit: cover;
        }

        & .video-library__icon {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);

          & svg {
            width: 32px;
            height: 32px;
          }
        }

        & .video-library__icon-pause {
          display: none;
        }
      }

      &.is-active {
        & .video-library__thumbnail {
          border: 2px solid var(--text-primary);
        }

        & .video-library__title {
          display: block;
        }

        & .video-library__icon-play {
          display: none;
        }

        & .video-library__icon-pause {
          display: block;
          color: var(--text-secondary);
        }
      }
    }
  }

  & .video-library__controls {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
  }
}