// Name:            Gallery carousel
// Description:     Display images in a carousel slider
//
// Component:       `c-gallery-carousel`
//
// Dependencies:    `settings/spacing.tokens`
//                  `v7_colors`
//
// ========================================================================
@use 'settings/v7/colors.tokens' as *;
@use 'settings/v7/spacing.tokens' as *;
@use 'settings/v7/layout-standard' as *;
@use 'settings/v7/global' as *;
@use 'settings/v7/scrollbar' as *;

@use 'tools/v7/mq' as *;
@use 'tools/v7/typography' as *;
@use 'tools/v7/zindex' as *;

// @use 'objects/v7/links' as *;
// @use 'objects/v7/icons' as *;

$scroll-size: 10px;

$lightbox-show: 1;
$lightbox-hide: 0;
$lightbox-full-size: 100%;
$lightbox-close-icon-position: -12px;

.c-carousel {
  --scrollbar-track: #{$ui-04};
  --scrollbar-thumb: #{$ui-07};

  @media (prefers-color-scheme: dark) {
		body:not([data-color-scheme*="light"]) & {
      --scrollbar-track: #{$ui-07};
      --scrollbar-thumb: #{$ui-03};
    }
  }

  body[data-color-scheme*="dark"] {
    --scrollbar-track: #{$ui-07};
    --scrollbar-thumb: #{$ui-03};
  }

  &--lightbox {
    background-color: var(--background-color-gray);

    img {
      margin-bottom: 0 !important;
    }

    .c-carousel__arrow {
      background-color: rgba($ui-02, .6);
      z-index: 99;
    }

    .c-carousel__name {
      color: var(--body-color);
      text-decoration: none;
    }

    .c-carousel__expanded picture {
      touch-action: none;
      z-index: 80;
    }
  }

  &--figcaption {
    .c-carousel__item::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 50%;
        background: var(--ui-gradient, linear-gradient(180deg, rgba(13, 13, 13, 0.00) 0%, rgba(13, 13, 13, 0.30) 25.13%, rgba(13, 13, 13, 0.80) 100%));
    }
  }

  &__container {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    @include scrollbar;
  }
  
  &__item {
    scroll-snap-align: center;
    min-width: 80%;
    @include bp(md) {
      min-width: 20%;
    }
  }

  &__expanded {
    height: $lightbox-full-size;
    a {
      z-index: 9;
    }
  }

  &__full-img {
    max-height: 90vh;
    opacity: $lightbox-hide;
    transition: opacity .5s linear;
    border-radius: 8px;
  }
  
  &__icon-close {
    top: $lightbox-close-icon-position;
    right: $lightbox-close-icon-position;
    border: 2px solid $ui-01;
    border-radius: 50%;
    opacity: $lightbox-show;
    background: $ui-02;
    z-index: 999;
  }

  &__overlay {
    width: $lightbox-hide;
    height: $lightbox-hide;
    background-color: rgba($ui-02, .8);
    z-index: 999;

    &:target {
      width: $lightbox-full-size;
      height: $lightbox-full-size;

      & img,
      & .btn-close {
        opacity: $lightbox-show;
      }
    }
  }
}