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

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  z-index: $zindex-modal - 11;

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    @include transition($modal-transition);

    transform: $modal-fade-transform;
  }

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

  &-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: $zindex-modal-background;

    @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 {
      @include opacity(0);
    }
    &.in {
      @include opacity(1);
    }
  }

  &-dialog {
    position: relative;
    width: auto;
    margin: $modal-dialog-margin-mobile;
    z-index: $zindex-modal - 11;

    @include media-breakpoint-up(md) {
      width: $modal-md;
      margin: $modal-dialog-margin auto;
    }

    @include media-breakpoint-down(sm) {
      margin: $modal-dialog-margin-mobile;
    }
  }

  &-content {
    border-width: 0;
    position: relative;
    background-clip: padding-box;
    display: flex;
    flex-direction: column;
    outline: 0;
    padding: $modal-content-padding-y $modal-content-padding-x;

    @include themes(background-color, modal-content-bg);
    @include box-shadow-themes(box-shadow-new);

    @include border-radius($modal-border-radius);
  }

  &-header {
    position: relative;
    display: flex;
    align-items: center;
    padding-bottom: $modal-content-padding-y;

    @include clearfix;

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

  &-tools {
    display: flex;
    align-items: center;

    .btn,
    .modal-close {
      margin-left: $grid-unit-y * 2;
    }
  }

  &-close {
    @include modal-close();
  }

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

    @include themes(color, color-new-heading);
  }

  modal-tabs {
    & + modal-scroll,
    & + modal-body > .modal-body {
      padding-top: $modal-content-padding-y;
    }
  }

  &-nav-tabs {
    margin-top: -$modal-content-padding-y;
    margin-left: -$modal-content-padding-x;
    margin-right: -$modal-content-padding-x;
    padding-left: $modal-content-padding-x;
    padding-right: $modal-content-padding-x;
    position: relative;

    display: flex;
    align-items: center;

    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1px;
      right: 0;
      display: block;

      @include themes(background-color, nav-tabs-border-color);
    }

    .nav {
      margin-bottom: 0;

      &:before {
        content: none;
      }

      > li {
        > a {
          padding-top: $modal-nav-padding-y;
          padding-bottom: $modal-nav-padding-y;
        }

        &.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;
            }
          }
        }
      }
    }

    & + modal-scroll,
    & + modal-body > .modal-body {
      padding-top: $modal-content-padding-y;
    }
  }

  &-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();

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

    & + .modal-inner {
      margin-left: $grid-unit-x * 25;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }

  &-container {
    display: flex;
    flex-direction: column;
    max-height: calc(
      100vh - #{$modal-dialog-margin * 2 + $modal-content-padding-y * 2}
    );

    &-fixed {
      height: calc(
        100vh - #{$modal-dialog-margin * 2 + $modal-content-padding-y * 2}
      );
    }
  }

  &-scroll,
  modal-scroll {
    overflow-y: auto;

    margin-left: -$modal-content-padding-x;
    margin-right: -$modal-content-padding-x;
    padding-left: $modal-content-padding-x;
    padding-right: $modal-content-padding-x;
    flex: 1 1 auto;

    @include styled-scroll-vert();
  }

  //&-scroll {
  //  $header-height: 32px;
  //  $header-height-mobile: 65px;
  //  $footer-height: 40px;
  //  $footer-height-mobile: 73px;
  //
  //  max-height: calc(
  //    100vh - #{$header-height + $footer-height + $modal-content-padding-y * 3 +
  //      $modal-dialog-margin * 2}
  //  );
  //  overflow-y: auto;
  //  position: relative;
  //  overflow-x: hidden;

  //
  //  @include clearfix();
  //
  //  .modal-body:first-child {
  //    padding-top: 0;
  //  }
  //
  //  @include themes(background-color, modal-body-bg);
  //
  //  @include styled-scroll-vert();
  //
  //  @include media-breakpoint-only(md) {
  //    max-height: calc(
  //      100vh - #{$header-height-mobile + $footer-height-mobile +
  //        $modal-dialog-margin * 2}
  //    );
  //  }
  //
  //  @include media-breakpoint-down(sm) {
  //    max-height: calc(
  //      100vh - #{$header-height-mobile + $footer-height-mobile +
  //        $modal-dialog-margin-mobile * 2}
  //    );
  //  }
  //
  //  &-nav {
  //    max-height: calc(
  //      100vh - #{$modal-dialog-margin * 2 + $modal-content-padding-y * 2 +
  //        ($nav-line-height + $modal-nav-padding-y * 2) + $footer-height}
  //    );
  //
  //    @include media-breakpoint-only(md) {
  //      max-height: calc(
  //        100vh - #{$header-height-mobile + $modal-dialog-margin * 2 +
  //          ($nav-line-height + $modal-nav-padding-y * 2) +
  //          $footer-height-mobile}
  //      );
  //    }
  //
  //    @include media-breakpoint-down(sm) {
  //      max-height: calc(
  //        100vh - #{$header-height-mobile + $modal-dialog-margin-mobile * 2 +
  //          ($nav-line-height + $modal-nav-padding-y * 2) +
  //          $footer-height-mobile}
  //      );
  //    }
  //  }
  //
  //  &-no-footer {
  //    max-height: calc(
  //      100vh - #{$header-height + $modal-content-padding-y * 2 +
  //        $modal-dialog-margin * 2}
  //    );
  //
  //    & > .modal-body:last-child,
  //    & > modal-body:last-child > .modal-body {
  //      overflow: hidden;
  //    }
  //
  //    @include border-radius-bottom($modal-border-radius);
  //
  //    @include media-breakpoint-only(md) {
  //      max-height: calc(
  //        100vh - #{$header-height-mobile + $modal-dialog-margin * 2}
  //      );
  //    }
  //
  //    @include media-breakpoint-down(sm) {
  //      max-height: calc(
  //        100vh - #{$header-height-mobile + $modal-dialog-margin-mobile * 2}
  //      );
  //    }
  //
  //    &.modal-scroll-nav {
  //      max-height: calc(
  //        100vh - #{$modal-dialog-margin * 2 +
  //          ($nav-line-height + $modal-nav-padding-y * 2) +
  //          $modal-content-padding-y * 1}
  //      );
  //
  //      @include media-breakpoint-only(md) {
  //        max-height: calc(
  //          100vh - #{$header-height-mobile + $modal-dialog-margin * 2 +
  //            ($nav-line-height + $modal-nav-padding-y * 2)}
  //        );
  //      }
  //
  //      @include media-breakpoint-down(sm) {
  //        max-height: calc(
  //          100vh - #{$header-height-mobile + $modal-dialog-margin-mobile * 2 +
  //            ($nav-line-height + $modal-nav-padding-y * 2)}
  //        );
  //      }
  //    }
  //  }
  //
  //  &-fixed-height {
  //    height: calc(
  //      100vh - #{$footer-height + $modal-content-padding-y * 3 +
  //        $modal-dialog-margin * 2}
  //    );
  //
  //    @include media-breakpoint-only(md) {
  //      height: calc(
  //        100vh - #{$header-height-mobile + $footer-height-mobile +
  //          $modal-dialog-margin * 2}
  //      );
  //    }
  //
  //    @include media-breakpoint-down(sm) {
  //      height: calc(
  //        100vh - #{$header-height-mobile + $footer-height-mobile +
  //          $modal-dialog-margin-mobile * 2}
  //      );
  //    }
  //
  //    &.modal-scroll-no-footer {
  //      @include media-breakpoint-only(md) {
  //        height: calc(
  //          100vh - #{$header-height + $modal-content-padding-y * 3 +
  //            $modal-dialog-margin * 2}
  //        );
  //      }
  //
  //      @include media-breakpoint-down(sm) {
  //        height: calc(
  //          100vh - #{$header-height-mobile + $modal-dialog-margin-mobile * 2}
  //        );
  //      }
  //    }
  //  }
  //}

  &-body {
    position: relative;

    @include themes(color, color-new-body-dark);

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

    & + .modal-body {
      padding-top: $modal-content-padding-y;

      @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;
      padding-top: $modal-content-padding-y;

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

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

  .modal-panel {
    .panel-heading,
    .panel-body {
      padding: $modal-inner-padding;
    }
  }

  [uib-collapse] + .modal-body {
    @include themes-border-top(modal-inner-border-color);
  }

  &-footer {
    padding-top: $modal-content-padding-y;
    text-align: left;

    @include clearfix;

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

  // Kill the scroll on the body
  // -----------------------------

  &-open {
    overflow: hidden;

    .modal {
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  // Measure scrollbar width for padding body during modal show/hide
  &-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
  }

  // Sizes
  // -----------------------

  &-sm {
    @include media-breakpoint-up(md) {
      width: $modal-sm;
    }
  }

  &-lg {
    @include media-breakpoint-up(lg) {
      width: $modal-lg;
    }
  }

  &-xl {
    @include media-breakpoint-up("xl") {
      width: $modal-xl;
      max-width: calc(100% - #{$modal-dialog-margin * 2});
    }

    @include media-breakpoint-between("md", "lg") {
      width: calc(100% - #{$modal-dialog-margin * 2});
    }
  }

  // Color variations
  // -----------------------

  &-primary {
    @include modal-variant($brand-primary);
  }

  &-success {
    @include modal-variant($brand-success);
  }

  &-info {
    @include modal-variant($brand-info);
  }

  &-warning {
    @include modal-variant($brand-warning);
  }

  &-danger {
    @include modal-variant($brand-danger);
  }

  // Style-variation
  // --------------------------

  &-po-create {
    &.modal-scroll {
      overflow: visible;
    }

    &-product {
      height: calc(100vh - 434px);
      overflow-y: auto;
      overflow-x: hidden;

      @include styled-scroll-vert();

      > div > div:first-child .panel-products-item {
        border-top-width: 0;
      }
    }

    &-container {
      .tab-pane {
        height: calc(100vh - 360px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: $grid-unit-y * 3;

        @include styled-scroll-vert();
      }
    }
  }

  &-po-edit {
    .modal-title {
      display: inline-block;
    }

    .modal-subtitle {
      display: inline-block;
      line-height: $grid-unit-y * 4;
    }

    &-price {
      font-size: $font-size-h4;
      color: $color-text-dark;

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