@import 'node_modules/@material/layout-grid/variables';
@import 'node_modules/@material/layout-grid/mixins';
@import "@material/drawer/mdc-drawer";
@import '../media';

.drawer-frame-root {
  display: flex;
  height: 100vh;
}

.drawer-frame-root .mdc-drawer {
  position: fixed;
}

.mdc-drawer-app-content {
  width: 100%;
}

.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content > .mdc-top-app-bar.mdc-top-app-bar--fixed {
    width: 100%;
}

// The width of the fixed header must be reduced when the drawer is present and
// open.
.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content > .mdc-top-app-bar.mdc-top-app-bar--fixed {
  @include lg {
    width: calc(100% - 256px);
  }
}

.mdc-drawer--modal {
  --v-drawer-active:yes;
  @include lg {
    --v-drawer-active:no;
  }
}

.mdc-drawer--dismissible.mdc-drawer--open {
  display: none;
  width: 0;
  --v-drawer-active:no;
  @include lg {
    --v-drawer-active:yes;
    display: flex;
    width: 256px;
  }
}

.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
  margin-left: 0;
  margin-right: 0;
  @include lg {
    margin-left: 256px;
    margin-right: 0;
   }
}

.v-drawer .mdc-drawer__content .v-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.mdc-drawer.v-drawer.mdc-drawer--modal {
  top: 0;
}

.mdc-drawer.v-drawer.v-drawer--full-height .mdc-drawer__content .v-list.v-list--full-height {
  min-height: 100%;
}

.mdc-drawer.v-drawer .mdc-drawer__content .v-list .v-list--bottom-wrapper {
  margin-top: auto;
}

.mdc-drawer.v-drawer .v-list-item--size-small {
  font-size: 0.80rem;
}

.mdc-drawer.v-drawer .v-list-item.v-item__secondary:not(.mdc-list-item--activated) {
  @include mdc-list-item-primary-text-ink-color(text-secondary-on-background);
}