@mixin open() {
  transition-delay: $animation-delay;
  .drawerContent {
    pointer-events: all;
    transition-delay: $animation-delay;
    transform: translateX(0);
  }
}

@mixin permanent() {
  @include open();

  width: $navigation-drawer-desktop-width;
  max-width: $navigation-drawer-desktop-width;

  &.wide {
    width: $navigation-drawer-max-desktop-width;
    max-width: $navigation-drawer-max-desktop-width;
  }

  &.active {
    & > .scrim {
      width: 0;
      background-color: rgba($drawer-overlay-color, 0);
    }
  }
}