@use '@angular/cdk';
@use './m3-snack-bar';
@use '../core/tokens/token-utils';
@use '../core/style/elevation';

$_side-padding: 8px;

$fallbacks: m3-snack-bar.get-tokens();

@keyframes _mat-snack-bar-enter {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes _mat-snack-bar-exit {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.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-snack-bar-container-animations-enabled {
  opacity: 0;

  // Fallback in case the animation fails.
  &.mat-snack-bar-fallback-visible {
    opacity: 1;
  }

  &.mat-snack-bar-container-enter {
    animation: _mat-snack-bar-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
  }

  &.mat-snack-bar-container-exit {
    animation: _mat-snack-bar-exit 75ms cubic-bezier(0.4, 0, 1, 1) forwards;
  }
}

.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;
  }

  .mat-mdc-snack-bar-container & {
    color: token-utils.slot(snack-bar-supporting-text-color, $fallbacks);
    border-radius: token-utils.slot(snack-bar-container-shape, $fallbacks);
    background-color: token-utils.slot(snack-bar-container-color, $fallbacks);
  }
}

.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;
  }

  .mat-mdc-snack-bar-container & {
    font-family: token-utils.slot(snack-bar-supporting-text-font, $fallbacks);
    font-size: token-utils.slot(snack-bar-supporting-text-size, $fallbacks);
    font-weight: token-utils.slot(snack-bar-supporting-text-weight, $fallbacks);
    line-height: token-utils.slot(snack-bar-supporting-text-line-height, $fallbacks);
  }
}

.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.
    color: token-utils.slot(snack-bar-button-color, $fallbacks);
  }

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

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