// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: map-get($clr-layers, modal);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;

  @media screen and (max-width: map-get($clr-grid-breakpoints, sm)) {
    padding: 0.5rem;
  }
}

.modal-dialog {
  position: relative;
  z-index: map-get($clr-layers, modal);
  width: $clr-modal-md-width;
  max-width: 100%;

  &.modal-sm {
    width: $clr-modal-sm-width;
  }

  &.modal-lg {
    width: $clr-modal-lg-width;
  }

  &.modal-xl {
    width: $clr-modal-xl-width;
  }

  $modal-boxshadow-y: 1px;
  $modal-boxshadow-spread: 2px;

  .modal-content {
    padding: $clr-modal-content-padding-top $clr-modal-content-padding-right $clr-modal-content-padding-bottom
      $clr-modal-content-padding-left;
    background-color: $clr-modal-bg-color;
    border-radius: $clr-modal-border-radius;
    box-shadow: 0 $modal-boxshadow-y $modal-boxshadow-spread $modal-boxshadow-spread $clr-modal-content-box-shadow-color;
  }
}

.modal-header {
  border-bottom: none;
  padding: 0 0 1rem 0;

  .modal-title {
    color: $clr-modal-title-color;
    font-size: $clr-modal-title-font-size;
    font-family: $clr-modal-title-font-family;
    font-weight: $clr-modal-title-font-weight;
    line-height: $clr-modal-title-line-height;
    letter-spacing: $clr-modal-title-letter-spacing;

    margin: 0;
    padding: 0 0.125rem;
  }

  .close {
    margin-top: -0.0416667rem;
    margin-right: -0.208333rem;
    font-size: 1.0833rem;
    line-height: 1rem;

    clr-icon {
      fill: $clr-modal-close-color;

      // per measurement, this results in an icon that is 16x16...
      width: 1rem;
      height: 1rem;
    }
  }
}

.modal-title-wrapper {
  width: 100%;
}

.modal-body {
  // This doesn't do much, but at least with several paragraphs in the content
  // it doesn't mess up the modal's proportions.
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0.125rem;

  & > :first-child {
    margin-top: 0;
  }
  & > :last-child {
    margin-bottom: 0;
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 0 0 0;

  .btn {
    //switched right margin to left because footer is right aligned
    margin: 0 0 0 0.5rem;
  }
}

@media screen and (max-width: map-get($clr-grid-breakpoints, md)) and (orientation: landscape) {
  .modal-body {
    max-height: 55vh;
  }
}

@media screen and (max-width: map-get($clr-grid-breakpoints, sm)) {
  .modal-content {
    padding: 0.5rem 0 0.5rem 1rem;
  }

  .modal-header {
    padding: 0 1rem 0.5rem 0;
  }

  .modal-body {
    max-height: 55vh;
  }

  .modal-footer {
    padding: 0.5rem 1rem 0 0;
  }
}

.modal-backdrop {
  $clr-backdrop-opacity: 0.85;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: $clr-modal-backdrop-color;
  opacity: $clr-backdrop-opacity;
  z-index: map-get($clr-layers, modal-bg);
}

// modal-nav is only used in wizards
.modal .modal-nav {
  display: none;
}