@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-ripple();
@include cdk-a11y();
@include cdk-overlay();
@include cdk-text-field();


$mat-theme: (
  primary: #0E5FE3,
  primary-lighter: #E8F0FC,
  secondary: #191919,
  contrast: (
    primary: #333333,
    secondary: #333333
  )
);

$primary: mat-palette($mat-theme);
$accent:  mat-palette($mat-theme, primary, secondary, primary-lighter);
$theme: mat-light-theme($primary, $accent);

// Include component only needed.
@include mat-bottom-sheet-theme($theme);

// Over-rides
.mat-bottom-sheet-container {
  overflow: hidden !important;

  &.x-bottom-sheet {
    padding: 0;
    @include media-breakpoint-between(sm, lg) {
      min-width: 80vw;
    }

    .x-bottom-sheet-wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-height: 80vh;
      overflow: hidden;
    }

    .x-bottom-sheet-header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: map_get($spacers, 1);
      padding: map_get($spacers, 3);
      background-color: #ffffff;
      border-bottom: 1px solid $gray-300;
      box-shadow: $box-shadow-sm;

      &-wrapper {
        min-width: 0;
        flex: 1 1 auto;
        padding-left: map_get($spacers, 3);
        text-align: center;

        .x-bottom-sheet-header-title {
          padding-left: map_get($spacers, 2);
          padding-right: map_get($spacers, 2);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .x-bottom-sheet-header-subtitle {
          padding-left: map_get($spacers, 2);
          padding-right: map_get($spacers, 2);
          font-size: $font-size-sm;
          color: theme-color('info');
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      &-action {
        display: flex;
        align-items: center;
        width: map_get($spacers, 4);
      }
    }

    .x-bottom-sheet-body {
      @extend %h-100,
              %position-relative;
      flex: 1 1 auto;
      overflow-y: auto;
      padding: map_get($spacers, 3);
    }
  }
}