// studio - elements - side drawers
// ====================

.drawer-cover,
.picker-cover {
  @extend %ui-depth3;

  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.drawer-cover.gray-cover,
.picker-cover.gray-cover {
  background: rgba(112, 112, 112, 0.8);
}

.drawer {
  @extend %ui-depth4;

  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 33.33vw;
  height: 100vh;
  background-color: $gray-l4;
}

body.drawer-open,
body.picker-open {
  overflow: hidden;
}

.picker {
  @extend %ui-depth4;

  display: none;
  position: fixed;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
  background-color: $gray-l4;
}