@import '../../sass/base.scss';

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal bg and corners and stuff

$modal-sm:                 18rem !default;
$modal-md:                 32rem !default;
$modal-lg:                 50rem !default;

$modal-inner-padding:      1rem;
$modal-dialog-margin-y-up: 1.75rem;

$modal-fade-transform:     translate(0, -50px) !default;
$modal-show-transform:     none !default;
$modal-transition:         transform .3s ease-out !default;
$modal-transition-custom:  transform .3s ease-out, opacity 0.3s ease-in-out !default;
$modal-scale-transform:    scale(1.02) !default;

$modal-content-bg:         #fff;
$modal-content-border:     1px solid rgba(#000, 0.175); // offcanvas
$modal-content-shadow:     0 .125rem .25rem rgba(#000, .075);

$modal-backdrop-bg:        #000;
$modal-backdrop-opacity:   .6;


// Container that the modal scrolls within
.bb-modal {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: $zindex-modal !important;
  display: none;
  width: 100%;
  height: 100%;
  max-width: none !important;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.is-modal-body {
  height: 0 !important;
  opacity: 0;
}

// Shell div to position the modal with bottom padding
.bb-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: $modal-dialog-margin-y-up auto;
  // allow clicks to pass through for custom click handling to close modal
  pointer-events: none;

  // When fading in the modal, animate it to slide down
  .bb-modal.fade & {
    transition: $modal-transition;
    transform: $modal-fade-transform;
  }
  .bb-modal.show & {
    transform: $modal-show-transform;
  }

  .bb-modal.is-modal-static & {
    transform: $modal-scale-transform;
  }

  // Custom animation
  .bb-modal.is-hidding & {
    transition: $modal-transition-custom;
  }

  .bb-modal.is-hidding:not(.show) & {
    transform: scale(.85);
    opacity: 0;
  }

  .bb-modal-body {
    overflow-x: hidden;
    overflow-y: auto;

    @media (min-width: map-get($breakpoints, lg )) {
      &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      &::-webkit-scrollbar-thumb,
      &::-webkit-scrollbar-track {
        border-radius: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #a8a8a8;
      }

      &::-webkit-scrollbar-track {
        background-color: transparent;
      }
    }
  }

  .is-modal > & {
    max-height: 100%;

    // Custom style
    width: var(--bb--modal-width--sm, #{$modal-sm});

    &[style*="--bb--modal-height--sm:"] {
      height: var(--bb--modal-height--sm);
    }
  }
}

// Actual modal
.bb-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
  height: 100%;
  min-height: 52px;
  max-height: 100%;
  // counteract the pointer-events: none; in the .modal-dialog
  pointer-events: auto;
  background-clip: padding-box;
  // box-shadow: $modal-content-shadow;
  // Remove focus outline from opened modal
  outline: 0;
}

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  width: 100vw;
  height: 100vh;
  background-color: $modal-backdrop-bg;

  // Fade for backdrop
  &.fade { opacity: 0; }
  &.show { opacity: $modal-backdrop-opacity; }
}

.btn-close {
  box-sizing: content-box;
  padding: .5rem;
  font-size: 0;
  color: #000;
  opacity: .6;
  cursor: pointer;
  border: 0;
  background-color: transparent;
  transition: opacity .25s;

  &:hover {
    opacity: 1;
  }

  &__icon {
    width: 2rem;
    height: 2rem;
  }

  &__icon {
    fill: currentColor;
  }

  .is-showing & {
    opacity: 0;
  }
}

// Modal header
// Top section of the modal w/ title and dismiss
.bb-modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 10;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
}

// Title text within header
.bb-modal-title {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.bb-modal-body {
  position: relative;
  // Enable `flex-grow: 1` so that the body take up as much space as possible
  // when there should be a fixed height on `.modal-dialog`.
  flex: 1 1 auto;
  max-width: 100%;
  // padding: $modal-inner-padding;
  background-color: $modal-content-bg;
}


.is-modal {
  align-items: center;
  justify-content: center;
}

// Custom position
.modal--custom-position {
  .bb-modal-dialog {
    margin: unset;
  }

  align-items: var(--bb--modal-v-align--sm);
  justify-content: var(--bb--modal-h-align--sm);
}