@use '@angular/cdk';
@use '../core/style/elevation';
@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
@use '../core/tokens/token-utils';

// The bottom sheet minimum width on larger screen sizes is based
// on increments of the toolbar, according to the spec. See:
// https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-specs
$_width-increment: 64px;
$container-vertical-padding: 8px !default;
$container-horizontal-padding: 16px !default;

.mat-bottom-sheet-container {
  @include elevation.elevation(16);
  padding: $container-vertical-padding
           $container-horizontal-padding;
  min-width: 100vw;
  box-sizing: border-box;
  display: block;
  outline: 0;
  max-height: 80vh;
  overflow: auto;

  @include token-utils.use-tokens(
    tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) {
    @include token-utils.create-token-slot(background, container-background-color);
    @include token-utils.create-token-slot(color, container-text-color);
    @include token-utils.create-token-slot(font-family, container-text-font);
    @include token-utils.create-token-slot(font-size, container-text-size);
    @include token-utils.create-token-slot(line-height, container-text-line-height);
    @include token-utils.create-token-slot(font-weight, container-text-weight);
    @include token-utils.create-token-slot(letter-spacing, container-text-tracking);
  }

  @include cdk.high-contrast {
    outline: 1px solid;
  }
}

// Applies a border radius to the bottom sheet. Should only be applied when it's not full-screen.
%_mat-bottom-sheet-container-border-radius {
  @include token-utils.use-tokens(
    tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) {
    @include token-utils.create-token-slot(border-top-left-radius, container-shape);
    @include token-utils.create-token-slot(border-top-right-radius, container-shape);
  }
}

.mat-bottom-sheet-container-medium {
  @extend %_mat-bottom-sheet-container-border-radius;
  min-width: $_width-increment * 6;
  max-width: calc(100vw - #{$_width-increment * 2});
}

.mat-bottom-sheet-container-large {
  @extend %_mat-bottom-sheet-container-border-radius;
  min-width: $_width-increment * 8;
  max-width: calc(100vw - #{$_width-increment * 4});
}

.mat-bottom-sheet-container-xlarge {
  @extend %_mat-bottom-sheet-container-border-radius;
  min-width: $_width-increment * 9;
  max-width: calc(100vw - #{$_width-increment * 6});
}