.app-drawer {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 73px;
  max-height: 100%;
  background-color: $layout-element-background;
  border-top-left-radius: $g-border-radius-lg;
  border-top-right-radius: $g-border-radius-lg;
  color: $layout-element-font-color;
  transition: max-width $g-transition;

  &.is-open {
    max-width: 280px;

    .show-when-drawer-open {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  .show-when-drawer-open {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-25px);
    transition: opacity $g-transition, transform $g-transition;
  }
}

.drawer-menu {
  $self: #{&};

  $item: #{$self}-item;
  $item-icon: #{$item}__icon;
  $item-title: #{$item}__title;
  $item-tail: #{$item}__tail;

  @at-root {
    #{$self} {
      padding: 15px;
    }

    #{$item} {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      padding: 6px 9px;
      border-radius: 6px;

      &:hover,
      &:focus,
      &.router-link-active,
      &.router-exact-link-active {
        text-decoration: none;
        background-color: $color-primary;
        color: #fff;
      }

      & + & {
        margin-top: 6px;
      }
    }

    #{$item-icon},
    #{$item-title},
    #{$item-tail} {
      display: inline-block;
    }

    #{$item-icon} {
      flex: 0 0 auto;
      font-size: 1.5rem;
    }

    #{$item-title} {
      margin-left: 15px;
      margin-right: 15px;
      flex: 1 1 auto;
    }

    #{$item-tail} {
      flex: 0 0 auto;
    }
  }
}