@use "@material/animation/_index" as animation;
@use "@material/ripple/_index" as ripple;
@use "@material/rtl/_index" as rtl;
@use "@material/shape/_index" as shape;
@use "@material/top-app-bar/_index" as top-app-bar;
@use "@material/typography/_index" as typography;
@use "~/util";

.mdc-drawer.mdc-drawer--dismissible {
  z-index: 1;
  position: fixed;
  height: 100%;
}

.mdc-drawer {
  bottom: 0;

  @media (max-width: top-app-bar.$mobile-breakpoint) {
    &:not(.mdc-drawer--dismissible) {
      width: calc(100% - 56px);
    }
    & .mdc-drawer__header {
      height: top-app-bar.$mobile-row-height;
      min-height: auto;
    }
  }

  &.nav {
    user-select: none;
    .mdc-drawer__header {
      display: flex;
      align-items: center;
      @include util.divider-border(bottom);
      padding-bottom: 0;
      .mdc-drawer__title {
        margin-bottom: 0;
        font-family: Courgette, Lato, sans-serif;
        font-size: 1.125rem;
        font-weight: 400;
        flex-grow: 1;
      }
      .logo {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        @include rtl.reflexive-property(margin, -8px, 8px);
      }
    }
    .mdc-drawer__content {
      a {
        text-decoration: none;
      }
    }
    .mdc-list-item {
      margin: 0;
      height: 56px;
      padding: 8px 16px;
      @include shape.radius(0);
      &--selected,
      &--activated {
        font-weight: bold;
      }
    }
    &.mdc-drawer--dismissible.rail {
      display: flex;
      transition-property: width;
      width: 56px;
      transform: none !important;
      transition-duration: 150ms;
      .mdc-list-item {
        width: 100%;
        color: transparent;
        transition: color 150ms linear;
        white-space: nowrap;
      }
      &.mdc-drawer--open {
        width: 256px;
      }
      &.mdc-drawer--animate {
        width: 56px;
      }
      &.mdc-drawer--opening {
        width: 256px;
      }
      &.mdc-drawer--closing {
        width: 56px;
      }
      .mdc-drawer__header,
      .mdc-drawer__content {
        width: 100%;
      }
    }
  }
}
