:root {
  --transition-width--drawer: width 0.3s;
  --pdg-content--rail: 16px;
  --drawer-content--rail: calc(360px - var(--w-header-main--ver)) ;
}

.header-main--container.rail .header-main--content main {
  width: 100%;
  overflow-y: auto;
  flex: 1;
}
.header-main--container.rail .header-main--content main .items-rail {
  display: none;
}
.header-main--container.rail .header-main--content main .items-rail > ul {
  width: 100%;
  background-color: var(--color-primary);
  gap: 16px;
}
.header-main--container.rail .header-main--content main .items-rail > ul .button.basic:before:hover {
  background-color: var(--color-on-primary);
}
.header-main--container.rail .header-main--content main .items-rail > ul .button.dire-col {
  padding: 6px 0 0 0;
  color: var(--color-on-primary);
  fill: var(--color-on-primary);
}
.header-main--container.rail .header-main--content main .items-rail > ul .button.dire-col:where(:hover, :active) .container-svg svg {
  stroke: var(--color-on-primary);
}
.header-main--container.rail .header-main--content main .items-rail > ul .button.dire-col:where(:hover, :active) .container-svg:before {
  background-color: var(--color-on-primary);
}
.header-main--container.rail .header-main--content main .items-rail > ul > li details .branch-summary span::after {
  margin-right: 0;
}
.header-main--container.rail .header-main--content main .items-rail > ul > li > ul {
  overflow-y: auto;
  width: var(--w-header-main--ver);
  left: -212px;
  position: absolute;
  height: 100dvh;
  max-height: 100dvh;
  top: 0;
  z-index: 2;
  border-left: 1px solid var(--color-outline-variant);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  fill: var(--color-on-primary);
  padding: 8px;
  border-top-right-radius: var(--shape-corner-large-default-size);
  border-bottom-right-radius: var(--shape-corner-large-default-size);
}
.header-main--container.rail .header-main--content main .items-rail > ul > li > ul :where(.button, .branch-summary) {
  color: var(--color-on-primary);
  fill: var(--color-on-primary);
}
.header-main--container.rail .header-main--content main .items-rail > ul > li > ul :where(.button, .branch-summary) svg {
  fill: var(--color-on-primary);
}
.header-main--container.rail .header-main--content main .items-rail > ul > li > ul li {
  flex: 0;
}
.header-main--container.rail .header-main--content main .items-rail > ul > li > ul .button span:not(.container-svg) {
  flex: 1;
}
.header-main--container.rail .header-main--content main .items-rail > ul > li.expanded > ul {
  width: var(--drawer-content--rail);
  box-shadow: 1px 0 1px 0 rgba(0, 0, 0, 0.15);
  left: var(--w-header-main--ver);
}
.header-main--container.rail .header-main--content main .items-rail li.expanded .low .container-svg:before {
  opacity: 8%;
  background-color: var(--color-on-primary);
}

@media screen and (min-width: 640px) {
  .header-main--container.rail + .main-container, .footer-container {
    padding-top: 0;
    margin-left: var(--w-header-main--ver);
  }
  .header-main--container.rail .header-main--content {
    padding: 0;
  }
  .header-main--container.rail .header-main--content header .button-menu {
    display: none;
  }
  .header-main--container.rail .header-main--content main {
    padding: var(--pdg-content--rail) 0;
  }
  .header-main--container.rail .header-main--content main .items-rail {
    display: flex;
  }
  .header-main--container.rail .header-main--content .button#toggle-theme {
    margin-bottom: 1rem;
  }
}

/*# sourceMappingURL=navigation-rail.css.map */