sass-references/angular-material/material/snack-bar/snack-bar-container.scss

@use '@angular/cdk';
@use '../core/tokens/m2/mdc/snack-bar' as tokens-mdc-snack-bar;
@use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar;
@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
@use '../core/tokens/token-utils';
@use '../core/style/elevation';

$_side-padding: 8px;

.mat-mdc-snack-bar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: 8px;

  .mat-mdc-snack-bar-handset & {
    width: 100vw;
  }
}

.mat-mdc-snackbar-surface {
  @include elevation.elevation(6);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: $_side-padding;

  [dir='rtl'] & {
    padding-right: 0;
    padding-left: $_side-padding;
  }

  .mat-mdc-snack-bar-container & {
    min-width: 344px;
    max-width: 672px;
  }

  // Ensures that the snack bar stretches to full width in handset mode.
  .mat-mdc-snack-bar-handset & {
    width: 100%;
    min-width: 0;
  }

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

  @include token-utils.use-tokens(
    tokens-mdc-snack-bar.$prefix,
    tokens-mdc-snack-bar.get-token-slots()
  ) {
    .mat-mdc-snack-bar-container & {
      @include token-utils.create-token-slot(color, supporting-text-color);
      @include token-utils.create-token-slot(border-radius, container-shape);
      @include token-utils.create-token-slot(background-color, container-color);
    }
  }
}

.mdc-snackbar__label {
  width: 100%;
  flex-grow: 1;
  box-sizing: border-box;
  margin: 0;
  padding: 14px $_side-padding 14px 16px;

  [dir='rtl'] & {
    padding-left: $_side-padding;
    padding-right: 16px;
  }

  @include token-utils.use-tokens(
    tokens-mdc-snack-bar.$prefix,
    tokens-mdc-snack-bar.get-token-slots()
  ) {
    .mat-mdc-snack-bar-container & {
      @include token-utils.create-token-slot(font-family, supporting-text-font);
      @include token-utils.create-token-slot(font-size, supporting-text-size);
      @include token-utils.create-token-slot(font-weight, supporting-text-weight);
      @include token-utils.create-token-slot(line-height, supporting-text-line-height);
    }
  }
}

.mat-mdc-snack-bar-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  box-sizing: border-box;
}

// These elements need to have full width using flex layout.
.mat-mdc-snack-bar-handset,
.mat-mdc-snack-bar-container,
.mat-mdc-snack-bar-label {
  // Note that we need to include the full `flex` shorthand
  // declaration so the container doesn't collapse on IE11.
  flex: 1 1 auto;
}

// The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase
// the specificity over the button styles that may bleed in from the rest of the app.
.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
  &.mat-unthemed {
    // MDC's `action-label-text-color` should be able to do this, but the button theme has a
    // higher specificity so it ends up overriding it. Define our own variable that we can
    // use to control the color instead.
    @include token-utils.use-tokens(
      tokens-mat-snack-bar.$prefix,
      tokens-mat-snack-bar.get-token-slots()
    ) {
      @include token-utils.create-token-slot(color, button-color);
    }
  }

  // Darken the ripples in the button so they're visible against the dark background.
  @include token-utils.create-token-values(tokens-mat-text-button.$prefix, (
    state-layer-color: currentColor,
    ripple-color: currentColor,
  ));

  .mat-ripple-element {
    opacity: 0.1;
  }
}