//
// Modals
// --------------------------------------------------

// .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 w/ bg and corners and stuff

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;

  &-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: $zindex-modal-background;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    @each $theme, $map in $themes {
      .#{$theme} & {
        $layout-fixed-sidebar-backdrop-bg: map-get($map, modal-backdrop-bg);

        background: rgba(
            $layout-fixed-sidebar-backdrop-bg,
            $modal-backdrop-opacity
          )
          0
          0
          no-repeat
          padding-box;
      }
    }

    // Fade for backdrop
    &.fade {
      opacity: 0;
    }
    &.show {
      opacity: 1;
    }
  }

  &-dialog {
    position: relative;
    width: auto;
    margin: $modal-dialog-margin-mobile;
    pointer-events: none;

    .modal.fade & {
      @include transition($modal-transition);

      transform: $modal-fade-transform;
    }

    .modal.show & {
      transform: $modal-show-transform;
    }

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

    &-scrollable {
      height: subtract(100%, $modal-dialog-margin-mobile * 2);

      .modal-content {
        max-height: 100%;
        overflow: hidden;
      }

      .modal-body {
        overflow-y: auto;
      }
    }

    &-centered {
      display: flex;
      align-items: center;
      min-height: subtract(100%, $modal-dialog-margin-mobile * 2);
    }
  }

  &-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-clip: padding-box;
    border-width: 0;
    outline: 0;

    @include border-radius($modal-border-radius);
    @include themes(background-color, modal-content-bg);

    @include media-breakpoint-up(md) {
      @include box-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    }
  }

  &-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends

    @include themes-border-bottom(modal-inner-border-color);

    //.btn-close {
    //  padding: ($modal-header-padding-y * 0.5) ($modal-header-padding-x * 0.5);
    //  margin: ($modal-header-padding-y * -0.5) ($modal-header-padding-x * -0.5)
    //    ($modal-header-padding-y * -0.5) auto;
    //}
  }

  &-close {
    margin-top: -2px;
    font-size: $font-size-base;
    height: $grid-unit-y * 3;
    width: $grid-unit-y * 3;
    cursor: pointer;
    text-align: center;
    line-height: $grid-unit-y * 3;
    margin-right: -6px;

    @include themes(color, color-text-dark);

    &:hover,
    &:focus {
      color: $brand-primary;
    }

    &:before {
      content: "\f00d";
      font-family: $font-family-awesome;
      font-weight: 500;
    }
  }

  &-title {
    font-size: $font-size-h3;
    font-weight: $font-weight-bold;
    margin: 0;
    line-height: $modal-title-line-height;

    @include themes(color, color-text-dark);
  }

  &-nav-tabs {
    margin-bottom: 0;

    @include themes-border-bottom(modal-inner-border-color);

    > li {
      > a {
        padding: ($modal-nav-padding-y - 2) $modal-content-padding-x
          ($modal-nav-padding-y + 2);

        &:before {
          @include themes-value(background-color, transparent);
        }
      }

      &.active > a {
        &,
        &:hover,
        &:focus {
          cursor: default;
          border-bottom-color: transparent;
          color: $nav-tabs-active-link-hover-color;
          background-color: transparent;

          &:before {
            content: "";
            height: 2px;
            background-color: $nav-tabs-active-link-hover-border-color;
          }
        }
      }
    }
  }

  &-sidenav {
    position: absolute;
    left: 0;
    width: $grid-unit-x * 25;
    bottom: 0;
    top: 0;
    padding-top: $grid-unit-y * 2;
    overflow-x: hidden;
    border-right-width: 1px;
    border-right-style: solid;

    @include themes(border-color, modal-inner-border-color);

    @include styled-scroll-vert();

    .list-group {
      &-item {
        padding-left: $modal-content-padding-x !important;
        padding-right: $modal-content-padding-x !important;
      }
    }

    .panel > .panel-heading .panel-title a {
      padding-left: $modal-content-padding-x;
      padding-right: $modal-content-padding-x;
    }
  }

  &-container {
    margin-left: $grid-unit-x * 25;
  }

  &-body {
    position: relative;
    flex: 1 1 auto;
    padding: $modal-inner-padding;

    @include themes(background-color, modal-body-bg);

    @include media-breakpoint-down(md) {
      padding: $layout-fixed-padding-mobile;
    }

    & + .modal-body {
      @include themes-border-top(modal-inner-border-color);
    }

    &-offset {
      margin-left: -$modal-content-padding-x;
      margin-right: -$modal-content-padding-x;

      .table {
        > thead,
        > tbody,
        > tfoot {
          > tr {
            > th,
            > td {
              &:first-child {
                padding-left: $modal-content-padding-x;
              }

              &:last-child {
                padding-right: $modal-content-padding-x;
              }
            }
          }
        }
      }
    }

    &-max-width {
      min-height: $grid-unit-y * 25;
      max-height: $grid-unit-y * 100;
      overflow-y: auto;
      position: relative;

      @include styled-scroll-vert();
    }

    &-bt {
      border-top-width: 1px;
      border-top-style: solid;

      @include themes(border-top-color, modal-inner-border-color);
    }

    &-btr {
      @include border-radius-top($modal-border-radius);
    }

    &-bbr {
      @include border-radius-bottom($modal-border-radius);
    }

    &-image {
      overflow: hidden;
      padding: 0;
    }
  }

  &-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: $modal-content-padding-y - $modal-footer-margin-between * 0.5
      $modal-content-padding-x - $modal-footer-margin-between * 0.5;
    border-top-width: 1px;
    border-top-style: solid;

    @include themes(border-top-color, modal-inner-border-color);
    @include themes(border-top-color, modal-inner-border-color);

    > * {
      margin: $modal-footer-margin-between * 0.5;
    }
  }
}

// Scale up the modal
@include media-breakpoint-up(sm) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    max-width: $modal-md;
    margin: $modal-dialog-margin auto;
  }

  .modal-dialog-scrollable {
    height: subtract(100%, $modal-dialog-margin * 2);
  }

  .modal-dialog-centered {
    min-height: subtract(100%, $modal-dialog-margin * 2);
  }

  .modal-content {
    @include box-shadow($modal-content-box-shadow-sm-up);
  }

  .modal-sm {
    max-width: $modal-sm;
  }
}

@include media-breakpoint-up(lg) {
  .modal-lg,
  .modal-xl {
    max-width: $modal-lg;
  }
}

@include media-breakpoint-up(xl) {
  .modal-xl {
    max-width: $modal-xl;
  }
}

// scss-docs-start modal-fullscreen-loop
@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}
// scss-docs-end modal-fullscreen-loop