/*
* Layout panel
*/
$width-mobile: 260px;
$width-desktop: 330px;
$scroll-width: 10px;

.page.animated ~ .layout-panel-wrap {
  opacity: 1;
  visibility: visible;
}

.layout-panel-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 600px;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: $zindex-rd-navbar + 2;
  opacity: 0;
  visibility: hidden;
  
  .jspPane {
    right: 10px;
  }

  &.active {
    .layout-panel {
      transform: translateX(0);
    }

    .layout-panel-inner:after {
      box-shadow: -3px 0px 50px -2px rgba(0, 0, 0, 0.09);
    }
  }

  .layout-panel-toggle,
  .layout-panel-inner > * {
    pointer-events: auto;
  }
}

.layout-panel {
  width: auto;
  transform: translateX($width-mobile + $scroll-width);
  transition: .55s all ease;
}

.layout-panel-content {
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding-right: $scroll-width;
}

.layout-panel-inner {
  position: relative;
  height: auto;
  min-height: 101vh;
  max-width: 260px;
  padding: 20px 0 20px;
  background: $white;
  margin-left: auto;
  text-align: center;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: -3px 0px 50px -2px transparent;
    z-index: -10;
    transition: .33s all ease;
  }
}

.mobile,
.tablet {
  &.rd-navbar-fixed-linked {
    .layout-panel-inner {
      padding-bottom: 90px;
    }
  }
}

.layout-panel-header {
  padding: 0 12px;

  .button {
    width: 100%;
  }

  .button + .button {
    margin-top: 15px;
  }

  * + .layout-panel-element,
  * + .layout-panel-title {
    margin-top: 25px;
  }

  @include media-breakpoint-up(md) {
    .layout-panel-header * + .layout-panel-element,
    .layout-panel-header * + .layout-panel-title {
      margin-top: 30px;
    }

    * + .layout-panel-element,
    * + .layout-panel-title {
      margin-top: 40px;
    }
  }
}

.layout-panel {

  .isotope {
    overflow: visible;
    margin: 0;
  }

  .isotope-filters {
    padding: 0 5px;

    ul {
      position: relative;
      padding-bottom: 10px;
      overflow: hidden;
      text-align: center;

      &::after {
        content: '';
        position: absolute;
        left: -100px;
        bottom: 0;
        right: -100px;
        border-bottom: 3px solid $gray-200;
      }
    }

    li {
      display: inline-block;
      padding-left: 6px;
      padding-right: 6px;
      font: 500 12px/18px $font-family-base;
      color: $gray-700;
    }
  }

  * + .isotope { margin-top: 20px; }
  
  @include media-breakpoint-up(md) {
    * + .isotope { margin-top: 30px; } 
  }
}

.layout-panel-toggle {
  @include reset-button;
  position: fixed;
  top: 20vh;
  right: $width-mobile + $scroll-width;
  z-index: 10;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: $white;
  color: $gray-1;
  text-align: center;
  box-shadow: -5px 1px 10px 0 rgba(0, 0, 0, 0.05);
  border-right: 0;
  transition: .55s all ease;

  &::before {
    content: '\f085';
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'FontAwesome';
    font-size: 16px;
    transition: .33s;
  }
}

@mixin layout-spacing($x: 5px, $y: $x) {
  padding-left: $x / 2;
  padding-right: $x / 2 - 1px;
  .isotope {
    position: relative;
    margin-bottom: -$y;
    transform: translateY(-$y);
  }

  .isotope-item {
    margin-top: $y;
    padding: 0 $x / 2;
    &:before {
      content: '';
      display: block;
    }
  }
}

.layout-panel-main {
  position: relative;
  z-index: 10;
  @include layout-spacing(10px, 10px);

  .isotope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: static !important;
  }

  .isotope-item {
    width: 100%;
    max-width: 50%;
    flex-grow: 1;
  }
}

* + .layout-panel-main { margin-top: 25px; }

@include media-breakpoint-up(md) {
  .layout-panel-toggle {
    width: 54px;
    height: 54px;
    line-height: 54px;

    &::before,
    &::after {
      font-size: 22px; 
    }
  }

  * + .layout-panel-main { margin-top: 40px; }
}

@include media-breakpoint-up(md) {
  .layout-panel-wrap {
    width: 730px;

    &.active {
      .layout-panel {
        transform: translateX(0);
      }
    }

    .layout-panel {
      transform: translateX($width-desktop + $scroll-width);
    }

    .layout-panel-inner {
      max-width: $width-desktop;
    }

    .layout-panel-toggle {
      right: $width-desktop + $scroll-width;
    }
  }

  &.ie-10,
  &.ie-11 {
    .layout-panel {
      transform: translateX($width-desktop + $scroll-width);
    }

    .layout-panel-toggle {
      right: 0;
    }

    .layout-panel-wrap {
      &.active {
        right: 0;

        .layout-panel-toggle {
          right: $width-desktop + $scroll-width;
        }
      }
    }
  }
}

.thumbnail-small {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  padding: 5px 5px 0;
  transition: 0.3s ease;
  color: $gray-700;
  background-color: $gray-100;
}

.thumbnail-small:hover {
  color: $white;
  background-color: $primary;
  border-color: $primary;
}

.thumbnail-small-image {
  position: relative;
  overflow: hidden;
  max-height: 105px;
  padding-bottom: (280 / 380) * 100%;
  background-position: center top;
  background-size: cover;
}

.thumbnail-small-image img {
  height: auto;
  width: 100%;
}

.thumbnail-small-hover-media {
  display: none;
}

.thumbnail-small-hover-image {
  width: 100%;
  height: 100%;
  background-position: center top;
  background-size: cover;
}

.thumbnail-small-caption {
  position: relative;
  padding: 8px 8px;
}

.thumbnail-small-header {
  position: relative;
  z-index: 1;
  font: 400 13px/18px $font-family-base;
  letter-spacing: .05em;
  color: inherit;
}

.layout-panel-controls {
  margin-top: 20px;
}

@include media-breakpoint-up(lg) {
  html:not(.tablet):not(.mobile) {
    .thumbnail-small-hover-media {
      display: block;
      position: absolute;
      left: -10px;
      top: 50%;
      z-index: 11;
      transform: translate(-120%, -60%);
      transition: .33s all ease;
      width: 342px;
      height: 252px;
      background: $white;
      padding: 7px;
      box-shadow: -3px 0px 50px -2px rgba(0, 0, 0, 0.14);
      opacity: 0;
      pointer-events: none;

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

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        z-index: -1000;
        transform: translateY(-50%) rotate(45deg);
        right: -11px;
        width: 24px;
        height: 24px;
        background: $white;
        box-shadow: -3px 0px 45px -2px rgba(0, 0, 0, 0.13);
      }
    }

    .thumbnail-small:hover {
      .thumbnail-small-caption:after {
        bottom: 0;
        opacity: 1;
      }

      .thumbnail-small-header {
        color: $white;
      }

      .thumbnail-small-image:after {
        opacity: 0;
      }

      .thumbnail-small-hover-media {
        z-index: 12;
        opacity: 1;
        transform: translate(-100%, -60%);
      }
    }
  }
}