@import '../../../../../node_modules/cbm-lc-styles/_conf.scss';

$defaultColor: $color-grey;
$activeColor: $color-blue;
$arrow-size: 90px;
$thumbnailWidth: 92px;
$thumbnailRatio: 1.33;
$thumbnailHeight: $thumbnailWidth / $thumbnailRatio;
$thumbnailGutter: 10px;
$thumbnailBarHeight: $thumbnailHeight + $thumbnailGutter * 2;
$slideHeight: 580px;

// Block

.cbm-photoGallery {
  position: relative;
  display: block;
  width: 100%;
  background: white;
  color: black;
  box-sizing: border-box;

  // Elements

  .slick-slide {
    display: flex !important;
    align-items: center;
    height: 560px;

    @include respond-to-mobile() {
      height: calc(100vw / 1.33);
    }

    > div,
    > div > div {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .cbm-photoGallery__slideContent {
      width: 100%;
      height: 100%;
      background: center center no-repeat;
      background-size: contain;

      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .cbm-photoGallery__hidden {
      display: none;
    }
  }

  .slick-arrow {
    display: flex !important;
    align-items: center;
    position: absolute;
    top: 50%;
    width: $arrow-size;
    height: $arrow-size;
    margin-top: ($thumbnailBarHeight + ($arrow-size / 2)) * -1;
    text-indent: 99999px; // hide inner text
    border: none;
    z-index: 1;
    transition: background-color 350ms ease;
    cursor: pointer;
    overflow: hidden;

    @include respond-to-mobile() {
      display: none !important;
    }

    &::before {
      display: none;
    }
  }

  .slick-prev,
  .slick-prev:hover,
  .slick-prev:focus {
    left: 0;
    background: rgba(0, 0, 0, 0.6) url('./arrow-left-90.png') center center no-repeat;
    background-size: contain;
  }
  .slick-prev:active {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .slick-next,
  .slick-next:hover,
  .slick-next:focus {
    right: 0;
    background: rgba(0, 0, 0, 0.6) url('./arrow-right-90.png') center center no-repeat;
    background-size: contain;
  }
  .slick-next:active {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .slick-thumb {
    position: static;
    bottom: auto;
    padding: $thumbnailGutter 0;
    text-align: center;
    overflow-y: hidden;
    white-space: nowrap;
    overflow-x: scroll;
    cursor: pointer;

    @include respond-to-mobile() {
      display: none !important;
    }

    li {
      display: inline-block;
      position: relative;
      width: $thumbnailWidth;
      height: $thumbnailHeight;
      margin-left: $thumbnailGutter / 2;
      margin-right: $thumbnailGutter / 2;
      vertical-align: top;
      transition: box-shadow ease 400ms;

      &.slick-active {
        box-shadow: 0 0 0 4px $activeColor;

        > button {
          box-shadow: 0 0 0 1px white;
        }
      }

      button {
        display: inline-block;
        width: $thumbnailWidth;
        height: $thumbnailHeight;
        background: #eee center center no-repeat;
        background-size: cover;
        cursor: pointer;
        border: none;

        &:hover {
          opacity: 0.8;
        }

        &:before {
          display: none;
        }
      }
    }
  }

  &__fullScreenToggler {
    display: flex;
    position: absolute;
    width: 40px;
    height: 40px;
    top: $slideHeight - 60px;
    right: 0;
    margin: 0;
    text-align: center;
    align-items: center;
    z-index: 1;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;

    &:hover {
      .cbm-icon {
        width: 40px;
        height: 40px;
      }
    }

    @include respond-to-mobile() {
      top: calc(100vw / 1.33 - 44px);
    }

    > * {
      margin: auto;
    }

    .cbm-icon {
      width: 35px;
      height: 35px;
    }
  }

  &__counter {
    position: absolute;
    width: 50px;
    padding: 0.5em;
    top: $slideHeight - 53px;
    left: 0;
    z-index: 1;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.8);

    @include respond-to-mobile() {
      top: calc(100vw / 1.33 - 42px);
      font-size: 17px;
    }
  }

  &__navigationByType {
    display: none;

    @include respond-to-mobile() {
      display: flex;
    }

    button {
      flex: 1;
      display: block;
      position: relative;
      padding: 0.5em 0;
      font-weight: bold;
      border: none;
      border-bottom: $defaultColor 3px solid;
      background: white;
      text-align: center;
      cursor: pointer;
      transition: 350ms ease;
      transition-property: color, border-color;

      &.cbm--active {
        color: $activeColor;
        border-color: $activeColor;

        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -4px;
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom: 5px solid $activeColor;
        }
      }
    }
  }

  // Modifiers

  // in full screen mode

  &--fullScreen {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 99999999; // On top of everything

    .slick-slide {
      height: calc(100vh - #{$thumbnailHeight} - (#{$thumbnailGutter} * 2));

      @include respond-to-mobile() {
        height: calc(100vh);
      }
    }

    & .cbm-photoGallery__counter {
      top: auto;
      bottom: $thumbnailBarHeight;

      @include respond-to-mobile() {
        bottom: 0;
      }
    }

    & .cbm-photoGallery__navigationByType {
      display: none;
    }

    & .cbm-photoGallery__fullScreenToggler {
      top: 0;
      bottom: auto;
    }
  }

  // current slide has overlay (ex: pro)

  &--slideHasOverlay {

    &:not(&--fullScreen) {
      &:hover .cbm-photoGallery__fullScreenToggler {
        display: none;
      }
    }

    .cbm-photoGallery__counter {
      display: none;
    }
  }

  &--360 {
    .slick-arrow {
      display: none !important;
    }
  }
}