@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;

// Name:            Gallery lightbox
// Description:     Display images in a lightbox
//
// Component:       `c-lightbox`
//
// Dependencies:    `settings/v7/colors.tokens`
//
// ========================================================================

// Variables
// ========================================================================

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

// ========================================================================

.c-lightbox {

  // Custom properties
  // ========================================================================

  --lightbox-item-size: 33.333333%;

  // ========================================================================

  margin: 0 -8px;
  
  &__item {
    max-width: var(--lightbox-item-size);
    @include bp(sm) {
      --lightbox-item-size: 25%;
    }
  }

  &__expanded {
    height: $lightbox-full-size;
  }

  &__full-img {
    max-height: 90vh;
    opacity: $lightbox-hide;
    transition: opacity .5s linear;
  }
  
  &__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;
    @include z(high);
  }

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

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

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