@import '~@angular/cdk/overlay-prebuilt.css';

$modal-padding: $spacing-md !default;
$modal-bg: $light !default;
$modal-footer-bg: $light-gray-3 !default;
$modal-backgrop-dark-bg: rgba($dark, .3) !default;

.backdrop--dark {
  background: $modal-backgrop-dark-bg;
}

 @media (max-width: breakpoint('sm')) {
  .cdk-overlay-pane {
    align-self: flex-end;
  }
}

.modal {
  background: $modal-bg;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  width: 100vw;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;

  @media (min-width: breakpoint('sm')) {
    max-width: 600px;
    height: auto;
    max-height: calc(100% - 2*#{$spacing-md});
    margin: $spacing-md auto;
  }

  .modal__header {
    padding: $modal-padding $modal-padding 0;
    display: block;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;

    h1,h2,h3,h4,h5,h6 {
      margin-bottom: 0;
    }

    .btn--plain {
      padding: $spacing-3xs;
      min-height: $spacing-md;
    }
  }

  .modal__content {
    padding: $modal-padding;
  }

  .modal__footer {
    display:flex;
    justify-content:flex-end;
    padding: $modal-padding;
    background: $modal-footer-bg;
  }
}