/**
 * Override bootstrap modal styles
 * add close button position(inside and outside)
 */
.modal {
  &.d-none.show {
    display: block !important;
  }
  &.modal-close-inside .close, &.modal-close-outside .close {
    cursor: pointer;
    outline: none;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 5;
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 1;
    transition: all 0.3s ease-in-out;
    @include media-breakpoint-up(md) {
      font-size: 24px;
      line-height: 1;
      top: 20px;
      right: 20px;
    }
  }
  .close {
    color: $black;
    opacity: 1 !important;
    &:not(:disabled):not(.disabled) {
      color: $black;
      @include hover-focus-active {
        color: $brand-primary;
      }
    }
    @include hover-focus-active {
      color: $brand-primary;
    }
  }
  &.modal-close-outside {
    .close {
      top: -20px;
    }
    @include media-breakpoint-down(xs) {
      .modal-dialog {
        margin-top: 20px;
      }
    }
  }
  .modal-title {
    font: 500 24px/26px $font-family-base;
  }
}

/*
* @section      MODAL AS LEFT/RIGHT SIDEBAR
* @description  Add "left" or "right" in modal parent div, after class="modal".
*/
.modal {
  &.left, &.right {
    .modal-dialog {
      top: 0;
      position: fixed;
      margin: auto;
      width: 300px;
      height: 100%;
      transform: translate3d(0, 0, 0) !important;
      @include media-breakpoint-up(md) {
        width: 400px;
      }
    }
    .modal-content {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      @include scroll();
    }
  }
  &.left.fade {
    .modal-dialog {
      left: -300px;
      transition: opacity 0.3s linear, left 0.3s ease-out;
      @include media-breakpoint-up(md) {
        left: -400px;
      }
    }
    &.show .modal-dialog {
      left: 0;
    }
  }
  &.right.fade {
    .modal-dialog {
      right: -300px;
      transition: opacity 0.3s linear, right 0.3s ease-out;
      @include media-breakpoint-up(md) {
        right: -400px;
      }
    }
    &.show .modal-dialog {
      right: 0;
    }
  }
}

.modal-header {
  position: relative;
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    margin: 0;
  }
}

/**
 * Styles for "product zoom" modal window
 * Used on product page and quick view popup
 */
#product-modal {
  background: $brand-primary-lighten;
  .modal-dialog {
    margin-top: 0;
    margin-bottom: 0;
    .modal-content {
      background: none;
      border: none;
      box-shadow: none;
      .modal-body {
        padding: 0;
        .zoom-product-cover {
          position: relative;
          .btn {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            padding: 0;
            width: 50px;
            height: 50px;
            text-align: center;
            letter-spacing: 0;
            i {
              font-size: 24px;
              line-height: 48px;
            }
          }
        }
        #modalThumb {
          transition: none !important;
          .swiper-container {
            padding-top: 5px;
            .thumb-container {
              img {
                cursor: pointer;
                background: $gray-100;
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0);
                transition: all 0.3s ease-in-out;
                &.selected, &:hover {
                  background: $white;
                  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
                }
                &.selected {
                  pointer-events: none;
                  cursor: default;
                }
              }
            }
          }
          &.collapse:not(.show) {
            max-height: 0;
            overflow: hidden;
          }
        }
      }
    }
  }
  &.show .modal-dialog {
    top: 50%;
    transform: translate(0, -50%);
  }
}

/**
 * Styles for "quick view" modal window
 * Used in product miniatures
 */
.quickview {
  .quickview-images-container {
    position: relative;
  }
  .modal-dialog {
    margin-left: auto;
    margin-right: auto;
    @include media-breakpoint-down(sm) {
      max-width: 500px;
      .modal-body {
        padding: 20px;
      }
    }
  }
}

/**
 * 'Product added' modal
 * showing after click button 'add to cart'
 */
#blockcart-modal {
  .modal-body {
    .blockcart-title {
      font: 400 23px/30px $font-family-base;
      position: relative;
      padding-left: 30px;
      i {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 26px;
        line-height: 1;
        color: $brand-primary;
      }
    }
    .modal-bottom {
      border-top: solid 1px $border-color;
    }
    .product-thumbnail {
      max-width: 238px;
      margin: 0 auto 26px;
    }
    .product-title {
      margin-bottom: 6px;
    }
    .product-attributes {
      display: flex;
      align-items: center;
      > div {
        color: $gray-500;
        &:not(:last-child) {
          margin-right: 20px;
        }
      }
    }
    .total-wrap {
      margin-top: 10px;
      > div {
        margin-bottom: 5px;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.43;
        letter-spacing: $letter-spacing-1;
        font-family: $font-family-base;
        span {
          margin-left: 9px;
        }
      }
    }
    .modal-cart-buttons {
      margin-left: -7px;
      margin-right: -7px;
    }
    @include media-breakpoint-down(xs) {
      padding-left: 15px;
      padding-right: 15px;
    }
  }
}

/**
 * Product customization modal
 * Used on check out pages
 */
.customization-modal {
  .modal-content {
    border-radius: 0;
    border: 1px solid $border-color;
    .modal-body {
      padding-top: 0;
      .product-customization-line {
        .label {
          text-transform: uppercase;
          text-align: right;
          color: $gray-800;
          font-size: 12px;
        }
        padding-bottom: 0.9375rem;
        padding-top: 0.9375rem;
        border-bottom: 1px solid $gray-100;
        &:last-child {
          padding-bottom: 0;
          border-bottom: 0;
        }
      }
    }
  }
}