Gallery

$gallery-chooser-icon-size: 20px !default;

.gallery {
  $root: &;
  $icon-font-size: 3.2rem;
  $icon-margin-size: 0.8rem;

  &__list {
    position: relative;
  }

  &__item {
    display: none;

    &.-active {
      display: block;
      animation: gallery-image-blink 0.4s linear;
    }
  }

  &__indicators,
  &__indicators__slider {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 1.6rem 0;
  }

  &__indicator,
  &__indicator__slider {
    position: relative;
    flex: 0 1 4rem;
    height: 0.4rem;
    background-color: $gray-lighter;
    list-style-type: none;

    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 0.8rem;
    }

    &::before {
      top: -0.8rem;
    }

    &::after {
      bottom: -0.8rem;
    }

    &:hover,
    &:focus {
      background-color: $gray;
      cursor: pointer;
    }

    &.-active {
      background-color: $primary;
    }
  }

  &__controls {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    pointer-events: none;

    #{$root}__prev,
    #{$root}__next,
    #{$root}__zoom {
      text-decoration: none;
    }
  }

  &__prev,
  &__next,
  &__zoom {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10%;
    color: $gray-light;
    pointer-events: auto;

    &::before {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: $icon-font-size;
    }

    @at-root {
      .-desktop &:hover {
        color: $primary;
      }

      [class*='-cs-'] {
        #{$root}__prev,
        #{$root}__next,
        #{$root}__zoom {
          color: $gray-light;
        }
      }
    }

    &:active {
      color: $primary;
    }
  }

  &__next {
    right: 0;

    &::before {
      $symbol-next: map-get($icons, 'chevron-right');
      @include icon-content-extended($symbol-next);

      right: $icon-margin-size;
    }
  }

  &__prev {
    left: 0;

    &::before {
      $symbol-prev: map-get($icons, 'chevron-left');
      @include icon-content-extended($symbol-prev);
      left: $icon-margin-size;
    }
  }

  &__zoom {
    @include breakpoint(medium) {
      right: 0;
      left: 0;
      width: 100%;

      &::before {
        $symbol-zoom: map-get($icons, 'search');
        @include icon-content-extended($symbol-zoom);
        top: auto;
        right: $icon-margin-size;
        bottom: $icon-margin-size;
        transform: none;
      }

      ~ .gallery__next {
        bottom: $icon-font-size + 2 * $icon-margin-size;

        &::before {
          transform: translateY($icon-font-size / 2 + $icon-margin-size) translateY(-50%);
        }
      }
    }
  }

  &.-lightboxed {
    $height-paddings: 4rem;
    $width-paddings: 3.2rem;
    $aspect-ratio: map-get($aspect-ratios, $base-aspect-ratio);
    $aspect-ratio-value: aspect-ratio-value($aspect-ratio);

    @include height-by-aspect-ratio(
      $aspect-ratio,
      $height-paddings,
      $width-paddings,
      -3.6rem
    ); //-3.6rem because of gallery indicators size

    position: relative;
    margin: auto;

    .gallery {
      &__zoom {
        display: none;
      }

      &__next {
        bottom: 0;

        &::before {
          transform: translateY(-50%);
        }
      }

      &__indicators {
        margin-bottom: 0;
      }
    }
  }

  @at-root .-desktop &--mobile-only {
    #{$root}__item {
      display: block;
    }

    #{$root}__controls,
    #{$root}__indicators {
      display: none;
    }
  }

  @at-root .-mobile &--mobile-only {
    @include breakpoint(pre-medium down) {
      .grid-margin-y {
        + #{$root}__controls {
          @each $breakpoint, $gutter in $grid-gutters {
            @include breakpoint($breakpoint) {
              top: rem-calc($gutter / 2);
            }
          }
        }

        &.-halve + #{$root}__controls {
          @each $breakpoint, $gutter in $grid-gutters {
            @include breakpoint($breakpoint) {
              top: rem-calc($gutter / 4);
            }
          }
        }
      }

      #{$root}__item.-active {
        ~ .cell > .grid-x {
          display: none;
        }
      }
    }

    @include breakpoint(medium) {
      #{$root}__item {
        display: block;
      }

      #{$root}__controls,
      #{$root}__indicators {
        display: none;
      }
    }
  }

  &__slide {
    &__controls {
      float: right;
      width: 40%;
    }

    &__chooser {
      display: inline-block;
      width: $gallery-chooser-icon-size;
      height: $gallery-chooser-icon-size;
      margin-right: 0.5em;
      padding: 0;
      padding-right: 1em;
      border: 2px solid $black;
      border-radius: 50%;
      background-color: $white;
      font-size: ($gallery-chooser-icon-size - 4px);
      cursor: pointer;

      &:hover,
      &:focus,
      &.-active {
        border-color: $primary;
      }
    }

    &__variant {
      display: none;

      &.-active {
        display: block;
      }

      &__title {
        width: 60%;
        margin-bottom: 0;
      }
    }
  }
}

@keyframes gallery-image-blink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}