@import "settings.global";
@import "objects.grid";
@import "utilities.boxing";

@mixin drawer {
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: $drawer-background-color;
  color: $drawer-color;
  z-index: $drawer-z-index;
}

@mixin drawer--bottom {
  top: 100%;
  left: 0;
  height: auto;
  width: $drawer-width-horizontal;
  margin-left: (100% - $drawer-width-horizontal) / 2;
  transform: translate(0, 0);
  border-radius: $drawer-border-radius $drawer-border-radius 0 0;
}

@mixin drawer--bottom--visible {
  transform: translateY(-99%);
}

@mixin drawer--top {
  bottom: 100%;
  left: 0;
  height: auto;
  width: $drawer-width-horizontal;
  margin-left: (100% - $drawer-width-horizontal) / 2;
  transform: translate(0, 0);
  border-radius: 0 0 $drawer-border-radius $drawer-border-radius;
}

@mixin drawer--top--visible {
  transform: translateY(99%);
}

@mixin drawer--left {
  top: 0;
  left: 0;
  height: 100%;
  width: $drawer-width-vertical;
  transform: translateX(-100%);
}

@mixin drawer--left--visible {
  transform: translateX(-1%);
}

@mixin drawer--right {
  top: 0;
  left: 100%;
  height: 100%;
  width: $drawer-width-vertical;
  transform: translate(0, 0);
}

@mixin drawer--right--visible {
  transform: translateX(-99%);
}

@mixin drawer__heading {
  padding: $drawer-heading-padding;
  margin: 0;
  text-align: center;
}

@mixin drawer__menu {
  display: block;
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

@mixin drawer__body {
  padding: $drawer-body-padding;
}

@mixin drawer__footer {
  padding: $drawer-footer-padding;
}

@mixin drawer__footer--block {
  @include grid;
  @include grid__cell--no-gutter;
  padding: $drawer-footer-block-padding;
}

@mixin drawer__footer--bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

@mixin drawer__footer-button--block {
  @include grid__cell;
  border-radius: $drawer-footer-block-button-border-radius;
}

@mixin drawer--high {
  box-shadow: $box-shadow-solid-high;
}

@mixin drawer--higher {
  box-shadow: $box-shadow-solid-higher;
}

@mixin drawer--highest {
  box-shadow: $box-shadow-solid-highest;
}