$sidenav-default-width: 304px;

md-sidenav {
  position: absolute;

  width: $sidenav-default-width;
  bottom: 0;
  z-index: $z-index-sidenav;
  background-color: white;
  overflow: auto;
  flex-direction: column;

  &.md-closed {
    display: none;
  }
  &.md-closed-add,
  &.md-closed-remove {
    display: flex;
    /* this is required as of 1.3x to properly
       apply all styling in a show/hide animation */
    transition: 0s all;
  }
  &.md-closed-add.md-closed-add-active,
  &.md-closed-remove.md-closed-remove-active {
    transition: $swift-ease-out;
  }

  &.md-locked-open,
  &.md-locked-open.md-closed,
  &.md-locked-open.md-closed.md-sidenav-left,
  &.md-locked-open.md-closed.md-sidenav-right {
    position: static;
    display: flex;
    transform: translate3d(0, 0, 0);
  }

  @extend .md-sidenav-left;
}
.md-sidenav-backdrop.md-locked-open {
  display: none;
}

.md-sidenav-left {
  left: 0;
  top: 0;
  transform: translate3d(0%, 0, 0);
  &.md-closed {
    transform: translate3d(-100%, 0, 0);
  }
}

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