:root {
  --w-content--drawer: 360px;
  --h-content--drawer: 100dvh;
  --z-index-drawer: 19;
  --gap-header-main--drawer: 1rem;
  --pdg-content--drawer: 1rem ;
}

.drawer-container[open] .drawer-content {
  display: flex;
}

.drawer-container {
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 100%;
  height: var(--h-content--drawer);
  max-height: var(--h-content--drawer);
  border: none;
  overflow: hidden;
  background: transparent;
}
.drawer-container::backdrop {
  position: fixed;
  z-index: var(--z-index-drawer);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(var(--color-on-surface--rgb)/0.52);
  -webkit-animation: none;
}
.drawer-container.backdrop-none::backdrop {
  background-color: transparent;
}
.drawer-container.position-right .drawer-content {
  position: absolute;
  right: 0;
  border-radius: var(--shape-corner-large-default-size) 0 0 var(--shape-corner-large-default-size);
  -webkit-animation: transition-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: transition-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.drawer-container.position-bottom .drawer-content {
  position: absolute;
  bottom: 0;
  max-height: 320px;
  min-height: 320px;
  width: 100%;
  min-width: 100%;
  border-radius: var(--shape-corner-large-default-size) var(--shape-corner-large-default-size) 0 0;
  -webkit-animation: transition-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: transition-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.drawer-container.position-top .drawer-content {
  position: absolute;
  top: 0;
  max-height: 320px;
  min-height: 320px;
  width: 100%;
  min-width: 100%;
  border-radius: 0 0 var(--shape-corner-large-default-size) var(--shape-corner-large-default-size);
  -webkit-animation: transition-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: transition-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.drawer-content {
  display: none;
  width: 100%;
  max-width: var(--w-content--drawer);
  height: var(--h-content--drawer);
  min-height: var(--h-content--drawer);
  overflow: hidden;
  gap: var(--gap-header-main--drawer);
  border-top-right-radius: var(--shape-corner-large-default-size);
  border-bottom-right-radius: var(--shape-corner-large-default-size);
  box-shadow: var(--elevation-1);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  -webkit-animation: transition-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: transition-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.drawer-content :where(.low, .basic):not(:where([disabled], .point-events--none)) {
  color: var(--color-on-primary);
  fill: var(--color-on-primary);
}
.drawer-content :where(.low, .basic):not(:where([disabled], .point-events--none)) svg {
  fill: var(--color-on-primary);
}
.drawer-content :where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active):before, .drawer-content :where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active) .container-svg:before {
  background-color: var(--color-on-primary);
}
.drawer-content header {
  max-height: var(--h-header-main--hor);
}
.drawer-content header, .drawer-content footer {
  padding: var(--pdg-header-main--hor);
}
.drawer-content main {
  padding: 0 var(--pdg-content--drawer);
}
.drawer-content footer {
  padding-bottom: 8px;
}
.drawer-content:not(footer) main {
  padding: 0 var(--pdg-content--drawer) 1rem;
}

#navigation-rail-drawer :where(.low, .basic):not(:where([disabled], .point-events--none)), #navigation-rail :where(.low, .basic):not(:where([disabled], .point-events--none)), #navigation-hor-drawer :where(.low, .basic):not(:where([disabled], .point-events--none)) {
  color: var(--color-on-primary);
  fill: var(--color-on-primary);
}
#navigation-rail-drawer :where(.low, .basic):not(:where([disabled], .point-events--none)) svg, #navigation-rail :where(.low, .basic):not(:where([disabled], .point-events--none)) svg, #navigation-hor-drawer :where(.low, .basic):not(:where([disabled], .point-events--none)) svg {
  fill: var(--color-on-primary);
}
#navigation-rail-drawer :where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active):before, #navigation-rail-drawer :where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active) .container-svg:before, #navigation-rail :where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active):before, #navigation-rail :where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active) .container-svg:before, #navigation-hor-drawer :where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active):before, #navigation-hor-drawer :where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active) .container-svg:before {
  background-color: var(--color-on-primary);
}

@media screen and (min-width: 640px) {
  :root {
    --pdg-content--drawer: 2.5rem ;
  }
}

/*# sourceMappingURL=drawer.css.map */