@use '@angular/material' as mat;
@import "./../../lib/scss/sc-variables";
@import "./../../lib/scss/sc-mixins";

.sc-image-gallery {
  //*
  //* vars
  //*

  --gallery-height-xs: #{$pic-gallery-height-xs};
  --gallery-height-sm: #{$pic-gallery-height-sm};
  --grid-gap: #{$pic-gallery-grid-gap};
  --spacer: #{$spacer};
  --p-3: var(--spacer);
  --p-4: calc(var(--spacer) * 1.5);
  --tags-nav-height: 48px;
  --spacing-top: var(--p-3);
  --spacing-right: var(--p-3);
  --spacing-bottom: var(--p-3);
  --spacing-left: var(--p-3);
  --pics-spacing-top: calc(var(--tags-nav-height) + var(--p-3) * 2);

  //*
  //* modifier classes
  //*

  &.--h-auto {
    --gallery-height-xs: auto;
    --gallery-height-sm: auto;
  }

  &.--h-100 {
    --gallery-height-xs: 100%;
    --gallery-height-sm: 100%;
  }

  &.--h-ng-symbl-docs {
    --gallery-height-xs: calc(var(--app-height, 100vh) - (#{$header-height-mobile} + (#{$content-padding} * 2) + #{$actionbar-height}) - 154px);
    --gallery-height-sm: calc(var(--app-height, 100vh) - 308px);
  }

  &.--h-100 {
    --gallery-height-xs: 100%;
    --gallery-height-sm: 100%;
  }

  &.--grid-gap-0 {
    --grid-gap: 0;
  }

  &.--grid-gap-1 {
    --grid-gap: 1px;
  }

  &.--grid-gap-8 {
    --grid-gap: 8px;
  }

  &.--no-tags {
    --pics-spacing-top: var(--p-3);
  }

  &.--p-3 {
    --spacing-top: var(--p-3);
    --spacing-right: var(--p-3);
    --spacing-bottom: var(--p-3);
    --spacing-left: var(--p-3);
    --pics-spacing-top: calc(var(--tags-nav-height) + var(--p-3) + var(--grid-gap));

    &.--no-tags {
      --pics-spacing-top: var(--p-3);
    }
  }

  &.--p-4 {
    --spacing-top: var(--p-4);
    --spacing-right: var(--p-4);
    --spacing-bottom: var(--p-4);
    --spacing-left: var(--p-4);
    --pics-spacing-top: calc(var(--tags-nav-height) + var(--p-4) + var(--grid-gap));

    &.--no-tags {
      --pics-spacing-top: var(--p-4);
    }
  }

  &.--pl-3 {
    --spacing-left: var(--p-3);
  }

  &.--pr-3 {
    --spacing-right: var(--p-3);
  }

  &.--pl-4 {
    --spacing-left: var(--p-4);
  }

  &.--pr-4 {
    --spacing-right: var(--p-4);
  }

  //*
  //* styles
  //*

  height: var(--gallery-height-xs);
  width: 100%;
  position: relative;

  @include media-breakpoint-up(sm) {
    height: calc(var(--gallery-height-sm));
  }

  &__tags-nav {
    height: auto;
    max-height: var(--tags-nav-height);
    transition: max-height $pic-gallery-tags-nav-transition-duration $ease-in-out-curve-function;
    position: absolute;
    top: var(--spacing-top);
    right: var(--spacing-right);
    left: var(--spacing-left);
    overflow: hidden;
    z-index: 200;
    border-radius: $pic-gallery-tags-nav-border-radius;
    @include mat.elevation(16);

    &-grid {
      display: grid;
      grid-template-columns: 0 minmax(0, 1fr);
      grid-template-rows: var(--tags-nav-height) auto;
      height: 100%; //? needed?
    }

    &-toggle-button-wrapper {
      grid-row: 1 / 2;
      z-index: 200;
    }

    &-toggle-button {
      margin: 4px 0 0 4px;
      @include mat.elevation(0);
      @include mat.elevation-transition;
    }

    &-toggle-button-icon {
      transition: transform $icon-rotate-transition-duration cubic-bezier(0.2, 0, 0.38, 0.9) $pic-gallery-tags-nav-transition-duration;
    }

    &-tags-wrapper {
      grid-row: 1 / 3;
      padding: 8px 24px 8px 8px;
      height: 100%;
      max-height: calc(var(--gallery-height-xs) - var(--spacing-top) - var(--spacing-bottom));

      @include media-breakpoint-up(sm) {
        max-height: calc(var(--gallery-height-sm) - var(--spacing-top) - var(--spacing-bottom));
      }

      mat-chip:first-of-type,
      .tags-nav-information-box {
        margin-left: 48px;
      }
    }

    .tags-nav-information-box {
      padding-top: 13px;
    }

    //* nav expanded

    &.expand {
      max-height: calc(100% - var(--spacing-top) - var(--spacing-bottom));
      transition: max-height $pic-gallery-tags-nav-transition-duration $ease-in-out-curve-function;

      .sc-image-gallery__tags-nav-grid,
      .sc-image-gallery__tags-nav-tags-wrapper {
        overflow: auto;
      }

      .sc-image-gallery__tags-nav-toggle-button {
        @include mat.elevation(6);
        @include mat.elevation-transition;
      }

      .sc-image-gallery__tags-nav-toggle-button-icon {
        transform: rotate(180deg);
        transition: transform $icon-rotate-transition-duration cubic-bezier(0.2, 0, 0.38, 0.9) $pic-gallery-tags-nav-transition-duration;
      }

      &.--h-50 {
        height: 50%;
      }
    }
  }

  &__pics-wrapper {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    padding: var(--pics-spacing-top) var(--spacing-right) var(--spacing-bottom) var(--spacing-left);
    height: 100%;
    overflow: auto;
  }

  &__pics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-gap: var(--grid-gap);

    &--few-items {
      grid-template-columns: minmax(0, 1fr);

      @media screen and (min-width: 480px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      @include media-breakpoint-up(xxl) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }

    > * {
      grid-column: auto / auto;
    }
  }

  &__loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .image-group {
    margin-bottom: $grid-gap;

    &:last-child {
      margin-bottom: 0;
    }

    &__header {
      display: flex;
    }

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }

    &__collapse-icon {}

    &__pics-wrapper {
      margin-right: calc(var(--spacing-right) * -1);;
      margin-left: calc(var(--spacing-left) * -1);

      .sc-image-gallery__pics-grid {
        padding-top: 16px;
        padding-right: var(--spacing-right);
        padding-left: var(--spacing-left);
        padding-bottom: 32px;
      }
    }
  }
}

// ? styles don't have any effect (because of encapsulation?)
// .layout-ov-page__content {
//   .sc-image-gallery {
//     width: calc(100% + #{$content-padding} * 2);
//     margin-top: -$grid-gap;
//     margin-right: -$content-padding;
//     margin-bottom: -$content-padding;
//     margin-left: -$content-padding;
//     height: auto;

//     @include media-breakpoint-up(md) {
//       margin-top: -$content-padding;
//       margin-left: -$grid-gap;
//       width: calc(100% + #{$content-padding} + #{$grid-gap});
//       height:  calc(var(--app-height, 100vh) - #{$header-height});
//     }
//   }
// }

.load-more {
  width: 100%;
  padding: 5px;
  margin-top: 15px;
}

.collapsible {
  overflow: hidden;
}