/* stylelint-disable keyframes-name-pattern */
@use '@angular/cdk' as cdk;
@use '@angular/material' as mat;
@use '../core/tokens/token-utils';
@use './m3-drawer';

$fallbacks: m3-drawer.get-tokens();

@keyframes _mtx-drawer-enter {
  from {
    box-shadow: none;
    visibility: hidden;
  }

  to {
    transform: none;
    visibility: visible;
  }
}

@keyframes _mtx-drawer-exit {
  from {
    transform: none;
    visibility: visible;
  }

  to {
    box-shadow: none;
    visibility: hidden;
  }
}

.mtx-drawer-container {
  display: block;
  width: 100%;
  padding: 8px 16px;
  overflow: auto;
  outline: 0;
  box-sizing: border-box;

  // We don't use this, but it's useful for consumers to position
  // elements (e.g. close buttons) inside the bottom sheet.
  position: relative;
  background-color: token-utils.slot(drawer-container-background-color, $fallbacks);
  color: token-utils.slot(drawer-container-text-color, $fallbacks);
  box-shadow: token-utils.slot(drawer-container-elevation-shadow, $fallbacks);

  @include cdk.high-contrast(active, off) {
    outline: 1px solid;
  }
}

.mtx-drawer-container-animations-enabled {
  &.mtx-drawer-container-enter {
    animation: _mtx-drawer-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
  }

  &.mtx-drawer-container-exit {
    animation: _mtx-drawer-exit 400ms cubic-bezier(0.25, 0.8, 0.25, 1) backwards;
  }

  &.mtx-drawer-right {
    transform: translateX(100%);
  }

  &.mtx-drawer-left {
    transform: translateX(-100%);
  }

  &.mtx-drawer-bottom {
    transform: translateY(100%);
  }

  &.mtx-drawer-top {
    transform: translateY(-100%);
  }
}

.mtx-drawer-right {
  border-top-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
  border-bottom-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
}

.mtx-drawer-left {
  border-top-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
  border-bottom-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
}

.mtx-drawer-bottom {
  border-top-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
  border-top-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
}

.mtx-drawer-top {
  border-bottom-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
  border-bottom-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
}