@import '../../_style/animation/variables.scss';
@import '../../_style/layout/mixins.scss';
@import '../../_style/elevation/mixins.scss';
@import '../../card/style/base.scss';

@mixin md-drawer-base() {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

@mixin md-drawer-temporary() {
  @include md-drawer-base;

  z-index: 102;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.4s $md-transition-default-timing;
  will-change: transform, box-shadow;
}

@mixin md-drawer-temporary-active() {
  transform: translate3d(0, 0, 0);

  @include md-layout-xsmall {
    @include md-elevation(16);
  }
}

.md-drawer {
  @include md-drawer-temporary;

  width: 400px;
  max-width: calc(100vw - 56px);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--md-background);

  @include md-layout-xsmall {
    width: 320px;
  }

  &.md-right {
    right: 0;
    left: auto;
    transform: translate3d(100%, 0, 0);
  }

  &.md-fixed {
    position: fixed;
  }

  &.md-active {
    @include md-drawer-temporary-active;
  }

  .md-list-item-container {
    font-size: 14px;
    text-transform: none;
  }
}