libs/barista-components/drawer/src/drawer-container.scss
@import '../../core/src/style/variables';

$dt-backdrop-opacity: 0.4;

/**
 * z-index Hierarchy:
 *
 * .dt-drawer-content:       1
 * .dt-drawer-backdrop:      2
 * dt-drawer:                3
 */

:host {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}

.dt-drawer-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background: $gray-900;
  opacity: 0;
  // Translate3d is faster than translateX because it uses hardware acceleration
  transform: translate3d(-100%, 0, 0);
  z-index: 2;

  :host.dt-drawer-is-open > & {
    opacity: $dt-backdrop-opacity;
    transform: translate3d(0, 0, 0);
    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}

.dt-drawer-content {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  flex-shrink: 1;
  display: block;
  overflow: auto;
  will-change: contents;

  :host.dt-drawer-content-transition > & {
    transition: margin 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
      width 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}
