//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use '../../variables.scss' as *;
@use '../../mixins.scss' as *;

.container {
  display: flex;
  color: $text-normal;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 30%;
  padding-top: 36px;
  padding-right: 36px;
  align-items: flex-start;

  ol {
    padding-left: 0;
    list-style: none;
    counter-reset: custom-ol;
    margin: 0;

    li {
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 8px;
      counter-increment: custom-ol;

      // Number box
      &::before {
        content: counter(custom-ol);
        width: 1.1em;
        font-size: 1.1em;
        font-weight: bold;
        z-index: 1;
      }
    }
  }

  .chapter {
    @include invisible-button;

    font-size: 1.1em;
    line-height: 1.1em;
    margin-bottom: 8px;
    padding: 12px 24px;

    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    border-left: 4px solid transparent;

    &.activeChapter {
      border-left: 4px solid $key-dark;
      background-color: $widget-normal;
    }
  }
}

.swiper {
  width: 70%;

  --swiper-pagination-color: #f0cece;
  --swiper-pagination-bullet-inactive-color: rgb(128, 128, 128);
  --swiper-pagination-bullet-inactive-opacity: 0.6;

  .slide {
    aspect-ratio: 5/4;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .fullSize {
      width: 100%;
      height: 100%;
    }

    background-size: cover;
    background-position: center;

    &:has(video) {
      background: none;
    }

    // Add some gloss.
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0) 30.1%
      );
      pointer-events: none;
    }

    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 70px 10% 35px 10%;
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
      color-scheme: only dark;
    }

    .arrowHint1 {
      position: absolute;
      top: 8%;
      left: 50%;
      width: 45%;
      color-scheme: only dark;
      color: $text-normal;
    }

    .arrowHint2 {
      position: absolute;
      top: 32%;
      left: 75%;
      text-align: center;
      transform: translateX(-50%);
      width: 35%;
      color-scheme: only dark;
      color: $text-normal;
    }

    .arrowHint3 {
      position: absolute;
      top: 13%;
      left: 63%;
      width: 30%;
      color-scheme: only dark;
      color: $text-normal;
    }

    .pagination {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;

      .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 5px;
        border-radius: 50%;
        background-color: rgba(128, 128, 128, 0.5);

        &.activeDot {
          background-color: $text-link;
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  body:global(.systemColors) .slide {
    background-image: url('../../../../assets/images/settings-sakura-dark.webp');
  }
}

@media (prefers-color-scheme: light) {
  body:global(.systemColors) .slide {
    background-image: url('../../../../assets/images/settings-sakura-light.webp');
  }
}

body:global(.lightColors) .slide {
  background-image: url('../../../../assets/images/settings-sakura-light.webp');
}

body:global(.darkColors) .slide {
  background-image: url('../../../../assets/images/settings-sakura-dark.webp');
}
