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

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

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

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

.sheet {
  background: $sheet-bg;
  box-shadow: $box-shadow-xl;
  max-width: 100%;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;

  @media (min-width: breakpoint('sm')) {
    max-width: 600px;
  }

  .sheet__header {
    padding: $sheet-padding $sheet-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;
    }
  }

  .sheet__content {
    padding: $sheet-padding;
  }

  .sheet__footer {
    margin-top: auto;
    display:flex;
    justify-content: space-between;
    padding: $sheet-padding;
    background: $sheet-footer-bg;
  }
}