@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/layout/_spec.scss

@@ -1,916 +0,0 @@
-/*
- * https://material.io/design/components/navigation-drawer.html
- * https://material.io/archive/guidelines/patterns/navigation-drawer.html
- * https://material.io/archive/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
- *
- * Elements follow descending elevation order and use sibling selector (~)
- * Body scrolls except when clipped on desktop (content scrolls instead)
- *
- * html.mdw-layout
- *   body.mdw-layout__body       Sets layout rules
- *     nav.mdw-layout__navdrawer Visible by default on Desktop. Hidden modal on Mobile
- *     div.mdw-layout__sidesheet Visible by default on Desktop. Hidden modal on Mobile
- *     div.mdw-layout__scrim     Visible if modal open. Must follow navdrawer and sidedrawer (~)
- *     div.mdw-layout__appbar    Should follow navdrawer and sidedrawer (~)
- *     div.mdw-layout__fab       Must follow appbar (~)
- *     div.mdw-layout__snackbar  Must follow fab (~)
- *     main.mdw-layout__content  Must follow fab (~)
- */
-
-@use '../../core/_breakpoint.scss' as breakpoint;
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_type.scss' as type;
-
-@use './_mixins.scss' as *;
-
-:root {
-  --mdw-layout__transform-inline: translateX(100%);
-  --mdw-layout__transform-inline-reverse: translateX(-100%);
-  --mdw-layout__fab-transform: translateX(0);
-  --mdw-layout__sheet-max-inline-size: calc(100vw - 56px);
-  --mdw-layout__margin: 24px;
-  @include breakpoint.has16DPMargin() {
-    --mdw-layout__margin: 16px;
-  }
-
-  @include breakpoint.isXSmallWindow() {
-    --mdw-layout__sheet-max-inline-size: calc(100vw - 64px);
-  }
-
-  &[dir="rtl"] {
-    --mdw-layout__transform-inline: translateX(-100%);
-    --mdw-layout__transform-inline-reverse: translateX(100%);
-    --mdw-layout__fab-transform: translateX(100%);
-  }
-}
-
-$scrimColor: rgba(0, 0, 0, 0.50) !default;
-$sheetMinWidth: 256px !default;
-$sheetMaxWidthMini: 72px !default;
-
-$fabSize: 56px !default;
-$fabCutSize: 72px !default;
-$fabCutDelay: 100ms !default;
-
-$rowTop: 1 !default;
-$rowBanner: 2 !default;
-$rowContent: 3 !default;
-$rowBottom: 4 !default;
-
-$columnNavDrawer: 1 !default;
-$columnContent: 2 !default;
-$columnSideDrawer: 3 !default;
-$columnViewportEnd: 4 !default;
-
-.mdw-layout {
-  overflow-y: hidden;
-
-  min-block-size: 100%;
-  block-size: 100%;
-  inline-size: 100vw;
-  margin: 0;
-  padding: 0;
-
-  // TODO: Move fonts out of app-layout
-  // Prefer iOS Dynamic Type for accessibility support
-  font: -apple-system-body;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-.mdw-layout__body {
-  @include type.addRules('body');
-
-  --mdw-grid__row1: "navdrawer appbar  sidedrawer";
-  --mdw-grid__row2: "navdrawer banner  sidedrawer";
-  --mdw-grid__row3: "navdrawer content sidedrawer";
-  --mdw-grid__row4: "navdrawer bottom  sidedrawer";
-
-  display: grid;
-  position: relative;
-  grid-template-areas:
-    var(--mdw-grid__row1)
-    var(--mdw-grid__row2)
-    var(--mdw-grid__row3)
-    var(--mdw-grid__row4);
-
-  // Use minmax everywhere to solve Chrome v80 grid bugs
-  grid-template-columns:
-    [start] minmax(0, auto)
-    [center] minmax(0, 100%)
-    [end] minmax(0, auto);
-
-  grid-template-rows:
-    [top] auto
-    [banner] auto
-    [content] minmax(auto, 1fr) /* Use minmax(0, 1fr) to clamp horizontally oversized grid-items */
-    [bottom] auto;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-
-  block-size: 100%;
-  max-inline-size: 100vw;
-  inline-size: 100vw;
-  margin: 0;
-  padding: 0;
-
-  transition-duration: motion.$simpleDuration;
-  transition-timing-function: motion.$standardEasing;
-
-  background-color: inherit;
-
-  &[mdw-navdrawer-style~="clipped"] {
-    --mdw-grid__row1: "appbar appbar sidedrawer";
-  }
-
-  &[mdw-sidedrawer-style~="clipped"] {
-    --mdw-grid__row1: "navdrawer appbar appbar";
-  }
-
-  &[mdw-navdrawer-style~="clipped"][mdw-sidedrawer-style~="clipped"] {
-    --mdw-grid__row1: "appbar appbar appbar";
-  }
-
-  &[mdw-navdrawer-style~="floating"] {
-    --mdw-grid__row2: "banner banner sidedrawer";
-  }
-
-  &[mdw-sidedrawer-style~="floating"] {
-    --mdw-grid__row2: "navdrawer banner banner";
-  }
-
-  &[mdw-navdrawer-style~="floating"][mdw-sidedrawer-style~="floating"] {
-    --mdw-grid__row2: "banner banner banner";
-  }
-}
-
-.mdw-layout__appbar {
-  position: sticky;
-  inset-block-start: 0;
-  grid-area: appbar;
-
-  margin-block-start: 0;
-
-  transition-duration: motion.$expandDuration;
-  transition-property: transform, margin-block-start, min-block-size;
-  transition-timing-function: motion.$decelerateEasing;
-  will-change: transform, margin-block-start, min-block-size;
-
-  transform: translateY(0); // browser hint
-  z-index: 4;
-
-  &[aria-hidden="true"] {
-    display: none;
-  }
-
-  &[mdw-hide] {
-    transition-duration: motion.$collapseDuration;
-    transition-timing-function: motion.$accelerateEasing;
-  }
-}
-
-.mdw-layout__scrim {
-  content: '';
-
-  position: fixed;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  // Scroll mask
-  overflow-y: scroll;
-  overscroll-behavior: none;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-
-  block-size: 100%;
-  inline-size: 100%;
-
-  cursor: auto;
-  outline: none;
-
-  pointer-events: none;
-  -webkit-tap-highlight-color: transparent;
-
-  transition-duration: motion.$fadeOutDuration;
-  transition-property: background-color, visibility;
-  transition-timing-function: motion.$accelerateEasing;
-
-  visibility: hidden;
-  z-index: 16;
-
-  background-color: transparent;
-
-  // Hide scrollbar
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &::after {
-    content: '';
-
-    display: block;
-
-    block-size: 200%;
-    inline-size: 200%;
-  }
-}
-
-.mdw-layout__navdrawer,
-.mdw-layout__sidesheet {
-  box-sizing: border-box;
-  max-block-size: 100vh;
-  block-size: 100%;
-  max-inline-size: var(--mdw-layout__sheet-max-inline-size);
-  inline-size: $sheetMinWidth;
-
-  transition-duration: motion.$expandDuration;
-  transition-property: block-size, max-block-size, transform;
-  transition-timing-function: motion.$decelerateEasing;
-
-  will-change: max-width, transform, position;
-
-  transform: translateX(0);
-  z-index: 5; // Above appbar shadow
-
-  background-color: inherit;
-  box-shadow: elevation.boxShadow(0);
-}
-
-.mdw-layout__sheet-content {
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-
-  box-sizing: border-box;
-  max-block-size: 100%;
-  block-size: 100%;
-  border-width: 1px;
-}
-
-.mdw-layout__navdrawer {
-  grid-area: navdrawer;
-
-  .mdw-layout__sheet-content {
-    border-inline-start-style: none;
-    border-inline-end-style: solid;
-  }
-
-  .mdw-list__content.mdw-overlay {
-    &::before,
-    & > .mdw-ripple__container {
-      margin: 4px 8px;
-
-      border-radius: 4px;
-    }
-  }
-}
-
-.mdw-layout__sidesheet {
-  grid-area: sidedrawer;
-
-  .mdw-layout__sheet-content {
-    border-inline-start-style: solid;
-    border-inline-end-style: none;
-  }
-}
-
-.mdw-layout[mdw-ios][mdw-standalone] {
-  .mdw-layout__appbar,
-  .mdw-layout__navdrawer,
-  .mdw-layout__sidesheet {
-    padding-block-start: 20px;
-    padding-block-start: constant(safe-area-inset-top);
-    padding-block-start: env(safe-area-inset-top);
-  }
-}
-
-@each $side in ('navdrawer', 'sidesheet') {
-  @include modal($side) {
-    .mdw-layout__#{$side}-hide {
-      display: none;
-    }
-
-    .mdw-layout__#{$side} {
-
-      // display: inline-block;
-      position: fixed;
-      inset-block: 0;
-
-      flex-direction: column;
-      grid-row-start: 1;
-
-      // Transition visibility
-      transition-duration: motion.$collapseDuration;
-      transition-property: max-width, transform, visibility;
-      transition-timing-function: motion.$accelerateEasing;
-
-      // Prevent tabbing
-      visibility: hidden;
-      z-index: 17; // Above scrim
-
-      .mdw-layout__sheet-content {
-        border-width: 0;
-      }
-      @if ($side == 'navdrawer') {
-        inset-inline: 0 auto;
-
-        transform: var(--mdw-layout__transform-inline-reverse);
-
-      } @else {
-        inset-inline: auto 0;
-
-        transform: var(--mdw-layout__transform-inline);
-      }
-
-      // Shown
-      &[id]:target,
-      &[aria-hidden="false"] {
-        // Change visibility immediately
-        transition-duration: motion.$expandDuration;
-        transition-property: max-inline-size, transform;
-        transition-timing-function: motion.$decelerateEasing;
-
-        transform: translateX(0);
-        visibility: visible;
-
-        box-shadow: elevation.boxShadow(16);
-
-        & ~ .mdw-layout__scrim {
-          pointer-events: auto;
-
-          visibility: visible;
-
-          background-color: $scrimColor;
-        }
-
-        &,
-        & ~ .mdw-layout__appbar {
-          .mdw-layout__#{$side}-show {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-
-.mdw-layout__banner {
-  grid-area: banner;
-
-  z-index: 0;
-}
-
-.mdw-layout__content {
-  display: flex;
-  position: relative;
-  align-items: center;
-  flex-direction: column;
-  grid-area: content;
-  overflow-x: visible;
-  overflow-y: visible;
-  -webkit-overflow-scrolling: touch;
-}
-
-.mdw-layout__content-page {
-  inline-size: 100%;
-}
-
-.mdw-layout__fab,
-.mdw-layout__snackbar {
-  position: sticky;
-  inset-block: auto 0;
-  grid-area: bottom;
-
-  inline-size: auto;
-
-  pointer-events: none;
-
-  transition-duration: motion.$expandDuration;
-  transition-property: transform;
-  transition-timing-function: motion.$decelerateEasing;
-
-  transform: translateY(-100%);
-  z-index: 6;
-
-}
-
-.mdw-layout__menus {
-  position: absolute;
-
-  z-index: 8;
-}
-
-.mdw-layout__dialogs {
-  position: fixed;
-  inset: 0;
-
-  pointer-events: none;
-
-  z-index: 24;
-}
-
-.mdw-layout__snackbar-anchor {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0 auto;
-
-  // Snackbars are not aligned with layout
-  box-sizing: border-box;
-  padding-block: calc(var(--mdw-layout__margin) * 0.5);
-  padding-inline-start: calc(var(--mdw-layout__margin) * 0.5);
-
-  transition-duration: inherit;
-  transition-property: transform, inset-block-end;
-  transition-timing-function: inherit;
-}
-
-.mdw-layout__snackbar .mdw-snackbar__container {
-  position: relative;
-}
-
-.mdw-layout__fab-anchor {
-  position: absolute;
-  inset-block-end: 0;
-
-  // Start aligned
-  inset-inline: auto 0;
-
-  padding: var(--mdw-layout__margin);
-
-  transition-duration: inherit;
-  transition-property: transform, inset-inline, padding-block;
-  transition-timing-function: inherit;
-
-}
-
-.mdw-layout__fab-anchor .mdw-fab {
-  transition-duration: motion.$collapseDuration;
-  transition-property: transform;
-  transition-timing-function: motion.$accelerateEasing;
-
-  transform: scale(0);
-}
-
-.mdw-layout__bottomnav {
-  position: sticky;
-  inset-block-end: 0;
-  grid-area: bottom;
-
-  z-index: 4;
-
-  box-shadow: elevation.boxShadow(8);
-
-  &[aria-hidden="true"] {
-    display: none;
-  }
-}
-
-.mdw-layout__appbar-shape {
-  display: flex;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-
-  grid-row: 1 / span 2;
-  overflow: hidden;
-
-  block-size: 100%;
-  inline-size: 100%;
-
-  transition-duration: inherit;
-  transition-property: box-shadow;
-  transition-timing-function: inherit;
-
-  z-index: -1;
-
-  box-shadow: elevation.boxShadow(4);
-
-  color: transparent;
-
-  .mdw-layout__appbar[mdw-autoraise]:not([mdw-raise]) & {
-    filter: none;
-
-    box-shadow: elevation.boxShadow(0);
-  }
-
-  &::before,
-  &::after {
-    content: '';
-
-    min-inline-size: var(--mdw-layout__margin);
-  }
-}
-
-.mdw-layout__fab-cut-track {
-  display: flex;
-  position: relative;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  flex-direction: row;
-
-  block-size: 100%;
-  inline-size: 100%;
-
-  transition-duration: motion.$shapeChangeDuration;
-  transition-property: transform;
-  transition-timing-function: motion.$standardEasing;
-
-  transform: translateX(100%) translateX(-($fabSize * 0.5));
-
-  &::before,
-  &::after,
-  & > svg {
-    position: absolute;
-    inset-block-start: 0;
-
-    block-size: 100%;
-  }
-
-  &::before,
-  &::after {
-    content: '';
-
-    inline-size: 100%;
-    margin-inline-start: -$fabCutSize * 0.5;
-
-    background-color: currentColor;
-  }
-
-  &::before {
-    inset-inline-start: -100%;
-  }
-
-  &::after {
-    inset-inline-start: $fabCutSize;
-  }
-
-  & > svg {
-    inset-inline-start: -$fabCutSize * 0.5;
-
-    inline-size: $fabCutSize;
-
-    fill: currentColor;
-  }
-}
-
-.mdw-layout__fab-mask-shape {
-  transition-delay: $fabCutDelay;
-  transition-duration: motion.$collapseDuration;
-  transition-property: transform;
-  transition-timing-function: motion.$accelerateEasing;
-
-  // Closed
-  transform: scale(0);
-}
-
-@include breakpoint.isXSmallWindow() {
-  .mdw-layout__appbar[mdw-autohide~="mobile"][mdw-hide] {
-    transform: translateY(-100%);
-
-    &[mdw-bottom] {
-      transform: translateY(100%);
-
-      & ~ .mdw-layout__fab,
-      & ~ .mdw-layout__snackbar {
-        transition-duration: motion.$collapseDuration;
-        transition-property: transform;
-        transition-timing-function: motion.$accelerateEasing;
-
-        transform: translateY(0);
-      }
-    }
-
-    .mdw-layout__appbar-shape {
-      filter: none;
-
-      box-shadow: elevation.boxShadow(0);
-    }
-  }
-}
-
-@include breakpoint.isSmallWindow() {
-  .mdw-layout__appbar[mdw-autohide~="tablet"][mdw-hide] {
-    transform: translateY(-100%);
-
-    &[mdw-bottom] {
-      transform: translateY(100%);
-
-      & ~ .mdw-layout__fab,
-      & ~ .mdw-layout__snackbar {
-        transition-duration: motion.$collapseDuration;
-        transition-property: transform;
-        transition-timing-function: motion.$accelerateEasing;
-
-        transform: translateY(0);
-      }
-    }
-
-    .mdw-layout__appbar-shape {
-      filter: none;
-
-      box-shadow: elevation.boxShadow(0);
-    }
-  }
-}
-
-@include breakpoint.maxSmallWindow {
-  .mdw-layout__body {
-    grid-template-columns:
-      [start] 0
-      [center] minmax(0, 100%)
-      [end] 0;
-  }
-
-  .mdw-layout__appbar[mdw-bottom] {
-    inset-block: auto 0;
-    grid-area: bottom;
-
-    z-index: 8;
-
-    .mdw-layout__appbar-shape {
-      box-shadow: elevation.boxShadow(8);
-    }
-
-    &[mdw-fab-cut] {
-      & ~ .mdw-layout__fab {
-        transform: translateY(-100%) translateY(#{$fabSize * 0.5});
-      }
-
-      .mdw-layout__appbar-shape {
-        transition-property: filter;
-
-        filter: elevation.filter(8);
-
-        box-shadow: elevation.boxShadow(0);
-      }
-
-      .mdw-layout__fab-mask-shape {
-        transform: scale(0);
-      }
-    }
-
-    &[mdw-fab-cut~="open"] {
-      .mdw-layout__fab-mask-shape {
-        transition-delay: 0s;
-        transition-duration: motion.$expandDuration;
-        transition-timing-function: motion.$decelerateEasing;
-
-        transform: scale(1);
-      }
-    }
-  }
-
-  .mdw-layout__appbar[mdw-autohide=""][mdw-hide] {
-    transform: translateY(-100%);
-
-    &[mdw-bottom] {
-      transform: translateY(100%);
-
-      & ~ .mdw-layout__fab,
-      & ~ .mdw-layout__snackbar {
-        transition-duration: motion.$collapseDuration;
-        transition-property: transform;
-        transition-timing-function: motion.$accelerateEasing;
-
-        transform: translateY(0);
-      }
-    }
-
-    .mdw-layout__appbar-shape {
-      filter: none;
-
-      box-shadow: elevation.boxShadow(0);
-    }
-
-  }
-
-  .mdw-layout__snackbar-anchor {
-    inset-inline: 0;
-
-    padding: calc(var(--mdw-layout__margin) * 0.5);
-  }
-
-  .mdw-layout__fab[mdw-mobile] {
-    & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
-      inset-block-end: var(--mdw-layout__margin);
-
-      transform: translateY(-56px);
-    }
-
-    & ~ .mdw-layout__content {
-      padding-block-end: calc(#{$fabSize} + var(--mdw-layout__margin));
-    }
-
-    &[aria-hidden="false"] .mdw-fab {
-      transition-duration: motion.$expandDuration;
-      transition-timing-function: motion.$decelerateEasing;
-
-      transform: scale(1);
-    }
-  }
-
-  .mdw-layout__appbar[mdw-fab-cut~="center"] .mdw-layout__fab-cut-track,
-  .mdw-layout__fab[mdw-mobile="center"] .mdw-layout__fab-anchor {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    right: 50%;
-
-    transform: translateX(50%);
-  }
-
-  .mdw-layout__appbar[mdw-fab-cut~="full"] .mdw-layout__fab-cut-track,
-  .mdw-layout__fab[mdw-mobile="full"] .mdw-layout__fab-anchor {
-    inset-inline: 0;
-
-    transform: none;
-  }
-
-  .mdw-layout__fab[mdw-mobile="full"] .mdw-fab__button {
-    inline-size: 100%;
-    padding-inline: 0;
-  }
-
-  .mdw-layout__appbar[mdw-fab-cut][mdw-bottom]:not([mdw-hide]) {
-    & ~ .mdw-layout__fab {
-      z-index: 8; // Fab is cut into appbar, therefore elevation must match or be above
-
-      .mdw-fab {
-        transform: scale(0);
-      }
-
-      &[aria-hidden="false"] .mdw-fab {
-        transition-delay: $fabCutDelay;
-        transition-duration: motion.$expandDuration;
-        transition-timing-function: motion.$decelerateEasing;
-
-        transform: scale(1);
-      }
-
-      .mdw-layout__fab-anchor {
-        padding-block: 0;
-      }
-    }
-
-    & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
-      inset-block-end: 0;
-
-      transform: translateY(-$fabSize * 0.5);
-    }
-  }
-}
-
-@include breakpoint.minMediumWindow {
-  .mdw-layout__body:not([mdw-navdrawer-toggle]):not([mdw-navdrawer-style="modal"]) {
-    .mdw-layout__navdrawer-show,
-    .mdw-layout__navdrawer-hide,
-    .mdw-layout__navdrawer-toggle {
-      display: none;
-    }
-  }
-
-  .mdw-layout__body:not([mdw-sidedrawer-toggle]):not([mdw-sidedrawer-style="modal"]) {
-    .mdw-layout__sidedrawer-show,
-    .mdw-layout__sidedrawer-hide,
-    .mdw-layout__sidedrawer-toggle {
-      display: none;
-    }
-  }
-
-  .mdw-layout__navdrawer {
-    // Full-height
-
-    position: sticky;
-    inset-block: 0 auto;
-
-    transform: none;
-  }
-
-  .mdw-layout__snackbar-anchor {
-    inline-size: 50%;
-  }
-
-  .mdw-layout__body[mdw-navdrawer-style~="clipped"],
-  .mdw-layout__body[mdw-sidedrawer-style~="clipped"] {
-    overflow-y: hidden;
-
-    & > .mdw-layout__content {
-      overflow-y: auto;
-    }
-  }
-
-  .mdw-layout__fab[mdw-desktop] {
-    &[aria-hidden="false"] .mdw-fab {
-      transition-duration: motion.$expandDuration;
-      transition-timing-function: motion.$decelerateEasing;
-
-      transform: scale(1);
-    }
-
-    &:not([mdw-desktop="appbar"]) ~ .mdw-layout__content {
-      padding-block-end: calc(#{$fabSize} + var(--mdw-layout__margin));
-    }
-  }
-
-  .mdw-layout__fab[mdw-desktop="appbar"] {
-    inset-block: 0 auto;
-    grid-area: appbar;
-
-    transform: translateY(100%);
-
-    &[aria-hidden="false"] .mdw-fab {
-      transition-duration: motion.$expandDuration;
-      transition-timing-function: motion.$decelerateEasing;
-
-      transform: translateY(-50%) scale(1);
-    }
-
-    & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
-      inline-size: 75%;
-    }
-
-    .mdw-layout__fab-anchor {
-      inset-block: 0 auto;
-      inset-inline: 0 auto;
-
-      padding-block: 0;
-      padding-inline: 8px;
-
-      transform: none;
-    }
-  }
-
-  .mdw-layout__fab[mdw-desktop="appbar"][aria-hidden="true"] .mdw-fab,
-  .mdw-layout__appbar[mdw-hide] ~ .mdw-layout__fab[mdw-desktop="appbar"] .mdw-fab {
-    transform: translateY(-50%) scale(0);
-  }
-
-  .mdw-layout__body[mdw-navdrawer-style~="clipped"] .mdw-layout__navdrawer,
-  .mdw-layout__body[mdw-sidedrawer-style~="clipped"] .mdw-layout__sidedrawer {
-    z-index: 0;
-  }
-
-  .mdw-layout__body[mdw-navdrawer-style~="floating"] .mdw-layout__navdrawer,
-  .mdw-layout__body[mdw-sidedrawer-style~="floating"] .mdw-layout__sidedrawer {
-    & .mdw-layout__sheet-content {
-      block-size: auto;
-      border-width: 0;
-    }
-  }
-
-  .mdw-layout__body[mdw-navdrawer-style~="card"] .mdw-layout__navdrawer,
-  .mdw-layout__body[mdw-sidedrawer-style~="card"] .mdw-layout__sidedrawer {
-    margin: 0 var(--mdw-layout__margin);
-    padding: var(--mdw-layout__margin) 0;
-
-    & > .mdw-layout__sheet-content {
-      box-shadow: elevation.boxShadow(8);
-    }
-  }
-
-  .mdw-layout__body[mdw-navdrawer-toggle~="dismissible"]:not([mdw-navdrawer-style="modal"]) .mdw-layout__navdrawer:not([aria-hidden="false"]),
-  .mdw-layout__body[mdw-sidedrawer-toggle~="dismissible"]:not([mdw-sidedrawer-style="modal"]) .mdw-layout__sidedrawer:not([aria-hidden="false"]) {
-    max-inline-size: 0;
-    inline-size: 0;
-    margin-inline: 0;
-
-    transition-duration: motion.$collapseDuration;
-    transition-property: width, max-width, margin, transform, visibility;
-    transition-timing-function: motion.$accelerateEasing;
-
-    visibility: hidden;
-
-    .mdw-layout__sheet-content {
-      box-shadow: elevation.boxShadow(0);
-    }
-  }
-
-  .mdw-layout__body[mdw-navdrawer-toggle~="mini"]:not([mdw-navdrawer-style="modal"]) {
-    .mdw-layout__navdrawer:not([aria-hidden="false"]) {
-      max-inline-size: $sheetMaxWidthMini;
-      inline-size: $sheetMaxWidthMini;
-
-      transition-duration: motion.$collapseDuration;
-      transition-timing-function: motion.$accelerateEasing;
-    }
-  }
-
-  .mdw-layout__body[mdw-sidedrawer-toggle~="mini"]:not([mdw-sidedrawer-style="modal"]) {
-    .mdw-layout__sidedrawer:not([aria-hidden="false"]) {
-      max-inline-size: $sheetMaxWidthMini;
-      inline-size: $sheetMaxWidthMini;
-
-      transition-duration: motion.$collapseDuration;
-      transition-timing-function: motion.$accelerateEasing;
-    }
-  }
-
-  .mdw-layout__appbar[mdw-autohide=""][mdw-hide] {
-    transform: translateY(-100%);
-
-    .mdw-layout__appbar-shape {
-      filter: none;
-
-      box-shadow: elevation.boxShadow(0);
-    }
-  }
-}