// Base Color 
$joebox-icon-color: #000;
$joebox-icon-color-hover: $joebox-icon-color;
$joebox-icon-bg-color: #ffde00;
$joebox-icon-bg-color-hover: lighten($joebox-icon-bg-color, 10%);

// Media Queries
$tablet-width: 768px;
$desktop-width: 1024px;

// MIXINS
@mixin tablet {
//  @media only screen and (min-device-width: #{$tablet-width}) {
  @media only screen and (min-width: #{$tablet-width}) {
    @content;
  }
}

@mixin desktop {
//  @media only screen and (min-device-width: #{$desktop-width}) {
  @media only screen and (min-width: #{$desktop-width}) {
    @content;
  }
}

// GENERAL
.joebox {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 98;
  
  .joebox-item {
    position: absolute;
    margin: 0 auto;
    max-height: 100%;
    height: 100%;
    width: 100%;
    transition: .4s;
    text-align: center;
    left: 0;
    right: 0;
 
    &:before { // create a full-height inline block pseudo=element
      content: ' ';
      display: inline-block;
      vertical-align: middle;  //vertical alignment of the inline element
      height: 100%;
    }

    img {
      display: none;
      height: auto;
      margin: auto;
      max-height: 95%;
      max-width: 100%;
        object-fit: contain;
        object-position: 50% 50%;

      vertical-align: middle;

      @include tablet {
//        max-height: 95%;
        max-width: 95%;
//        object-fit: contain;
//        object-position: 50% 50%;
      }
    }
  } 
}

.joebox-inner {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
}

.joebox-image-wrapper {
  font: 0/0 a;
  height: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: -1;
  
  > div {
    display: table;
  }
}

// MODAL
.modal-backdrop {
  background-color: rgb(0, 0, 0);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

// ICONS
// GENERAL
// ------------------
.joebox-icon {
  background-color: $joebox-icon-bg-color;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  font-size: 17px;
  height: 50px;
  line-height: 1em;
  position: absolute;
  text-align: center;
  transition: .2s;
  width: 50px;
  z-index: 99;
  
  @include desktop {
//    height: 10vw;
//    width: 10vw;
//    max-height: 3em;
//    max-width: 3em;
  }
  
  &:hover {
    background-color: $joebox-icon-bg-color-hover;
    transform: scale(1.1);
  }
  
  i {
    display: inline-block;
    position: relative;
  }
  
  // NAVIGATION ICONS
  // ------------------
  &.joebox-nav-icon {
    bottom: 0;
    z-index: 11;
    
    &.joebox-nav-prev {
      left: 0;
    }

    &.joebox-nav-next {
      left: 55px;
    }

    @include desktop {
      bottom: auto;
      margin-top: -24px;
      top: 50%;
      
      &.joebox-nav-prev {
        left: 2%;
      }

      &.joebox-nav-next {
        left: auto;
        right: 2%;
      }
    }

    i {
      border: solid $joebox-icon-color;
      border-width: 0 4px 4px 0;
      margin: .9em 0 0;
      padding: 7px;
      position: relative;

      &.joebox-icon-right {
        margin-left: -.5em;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
      }

      &.joebox-icon-left {
        margin-right: -.5em;
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
      }

      &.joebox-icon-up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
      }

      &.joebox-icon-down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }
      
      // Hover
      &:hover {
        border-color: $joebox-icon-color-hover;
      }
    }
  }
  
  
  // CLOSE ICON
  // ------------------
  &.joebox-close-icon {
    bottom: 0;
    right: 0;
    
    @include desktop {
      bottom: auto;
      top: 2%;
      right: 2%;
    }

    i {
      &:before, 
      &:after {
        background-color: $joebox-icon-color;
        content: ' ';
        height: 30px;
        left: -1px;
        position: absolute;
        top: -4px;
        width: 3.5px;
      }

      &:before {
        transform: rotate(45deg);
      }

      &:after {
        transform: rotate(-45deg);
      }
      
      // Hover
      &:hover {
        background-color: $joebox-icon-color-hover;
      }
    }
  }
  
  &.disabled {
    background-color: #ccc;
    opacity: .6;
    
    &:hover {
      cursor: default;
      transform: scale(1);
    }
  }
}

// LOADING INDICATOR
.joebox-loader,
.joebox-loader:after {
  border-radius: 50%;
  width: 5vw;
  height: 5vw;
}
.joebox-loader {
  border: 1.1em solid rgba($joebox-icon-bg-color, .4);
  border-left-color: $joebox-icon-bg-color;
  font-size: 10px;
  left: 45vw;
  margin: 0 0 0 0;
  position: fixed;
  text-indent: -9999em;
  top: 45%;
  transform: translateZ(0);
  z-index: 99;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}