beercss 3.13.2 → 4.0.0

package/src/cdn/elements/navigations.css

@@ -1,462 +1,461 @@
-nav > :is(ol, ul),
-nav > :is(ol, ul) > li {
-  all: unset;
-}
-
-nav,
-.row,
-a.row {
-  display: flex;
-  align-items: center;
-  align-self: normal;
-  text-align: start;
-  justify-content: flex-start;
-  white-space: nowrap;
-  gap: 1rem;
-  border-radius: 0;
-  min-inline-size: 0;
-}
-
-a.row,
-nav.row {
-  min-block-size: 3rem;
-  margin: 0;
-}
-
-:is(nav, .row, .max) > :only-child,
-:is(nav, .row, .max) > span > *,
-nav > :is(ol, ul) > li > :only-child,
-nav > :is(ol, ul) > li > span > * {
-  margin: 0;
-}
-
-:is(nav, .row) > :not(ul, ol, header, footer) {
-  margin: 0;
-  white-space: normal;
-  flex: none;
-}
-
-:is(nav, .row).min {
-  display: inline-flex;
-}
-
-:is(nav, .row, li).no-space {
-  gap: 0;
-}
-
-:is(nav, .row, li).tiny-space {
-  gap: 0.5rem;
-}
-
-:is(nav, .row, li).medium-space {
-  gap: 1.5rem;
-}
-
-:is(nav, .row, li).large-space {
-  gap: 2rem;
-}
-
-:is(nav, .row) > .max,
-:is(nav, .row) > :is(ol, ul) > .max {
-  flex: 1;
-}
-
-:is(nav, .row).wrap {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-:is(header, footer) > :is(nav, .row) {
-  min-block-size: inherit;
-}
-
-nav:is(.left, .right, .top, .bottom) {
-  --_padding: 0.5rem;
-  --_top: calc(var(--_padding) + var(--top));
-  --_bottom: calc(var(--_padding) + var(--bottom));
-  position: sticky;
-  inset: 0;
-  border: 0;
-  color: var(--on-surface);
-  transform: none;
-  z-index: 100;
-  text-align: center;
-  padding: var(--_padding);
-  margin: 0;
-}
-
-nav:is(.left, .right) {
-  justify-content: flex-start;
-  flex-direction: column;
-  background-color: var(--surface);
-  block-size: 100dvh;
-  min-inline-size: 6rem;
-  padding-block: var(--_top) var(--_bottom);
-}
-
-nav:is(.top, .bottom) {
-  position: sticky;
-  inset: 0;
-  padding: 0.5rem;
-  justify-content: center;
-  flex-direction: row;
-  background-color: var(--surface-container);
-  block-size: auto;
-  min-block-size: 4.5rem;
-}
-
-nav.top {
-  block-size: calc(var(--top) + 4.5rem);
-  padding-block-start: var(--_top);
-}
-
-nav.bottom {
-  block-size: calc(var(--bottom) + 4.5rem);
-  padding-block-end: var(--_bottom);
-}
-
-nav > header {
-  min-block-size: auto;
-  padding: 0;
-  margin: 0 0 1rem 0;
-  align-items: flex-start;
-  gap: 1rem;
-  background: none !important;
-}
-
-nav:is(.top, .bottom) > header {
-  flex-direction: row;
-  align-items: center;
-  margin: 0 1rem 0 0;
-}
-
-nav > header > * {
-  margin: 0;
-}
-
-nav > header > .extend:hover {
-  --_padding: 0;
-  inline-size: var(--_size);
-}
-
-nav > header > .extend:hover > span {
-  display: none;
-}
-
-nav > :is(ol, ul) {
-  all: inherit;
-  min-inline-size: auto;
-  margin: 0;
-  padding: 0;
-  flex: auto;
-}
-
-nav.max:is(.left, .right, .top, .bottom) {
-  gap: 0;
-  inline-size: auto;
-  align-items: flex-start;
-  min-inline-size: 12.75rem;
-  padding: var(--_top) 1.25rem var(--_bottom) 1.25rem;
-}
-
-nav.max > :is(ol, ul) {
-  padding: 0;
-}
-
-nav.max > header {
-  margin: 0 0 1.25rem 0;
-}
-
-nav.max:is(.top, .bottom) > header {
-  margin: 0 1.25rem 0 0;
-}
-
-nav.max > header > .extend {
-  --_padding: 1.5rem;
-  inline-size: auto;
-  padding: 0 var(--_padding);
-}
-
-nav.max > header > .extend > span {
-  display: block;
-  margin-inline-start: var(--_padding);
-}
-
-nav.max > header > .extend > :is(img, svg) + span {
-  margin-inline-start: calc(1rem + var(--_padding));
-}
-
-nav.max:is(.top, .bottom) {
-  padding: 0 0.5rem;
-  align-items: center;
-  min-inline-size: auto;
-  max-inline-size: none;
-}
-
-nav:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
-nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  line-height: normal;
-  inline-size: 3.5rem;
-  font-size: 0.8rem;
-}
-
-nav:not(.max):is(.left, .right, .top, .bottom) > a:not(.button, .chip) > i,
-nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) > i {
-  padding: 0.25rem 1rem;
-  border-radius: 2rem;
-  transition: padding var(--speed1) linear;
-  margin: 0 auto;
-}
-
-nav.max:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
-nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
-  flex-direction: row;
-  gap: 0.5rem;
-  inline-size: auto;
-  block-size: 3.5rem;
-  padding: 0 1rem;
-  border-radius: 2rem;
-  font-size: inherit;
-}
-
-nav.max:is(.top, .bottom) > a:not(.button, .chip),
-nav.max:is(.top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
-  gap: 0.25rem;
-  block-size: 2.5rem;
-  font-size: 0.8rem;
-}
-
-nav.max:is(.left, .right, .top, .bottom) > a.active:not(.button, .chip),
-nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a.active:not(.button, .chip),
-nav:is(.left, .right, .top, .bottom):not(.max) > a.active:not(.button, .chip) > i,
-nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol, ul) > li > a.active:not(.button, .chip) > i {
-  background-color: var(--secondary-container);
-  color: var(--on-secondary-container);
-}
-
-:is(nav, .row):is(.left-align, .top-align, .vertical) {
-  justify-content: flex-start;
-}
-
-:is(nav, .row):is(.right-align, .bottom-align) {
-  justify-content: flex-end;
-}
-
-:is(nav, .row):is(.center-align, .middle-align) {
-  justify-content: center;
-}
-
-:is(nav, .row):is(.left-align, .top-align, .vertical).vertical {
-  align-items: flex-start;
-}
-
-:is(nav, .row):is(.right-align, .bottom-align).vertical {
-  align-items: flex-end;
-}
-
-:is(nav, .row):is(.center-align, .middle-align).vertical {
-  align-items: center;
-}
-
-nav:not(.left, .right) > .space {
-  inline-size: 0.5rem;
-}
-
-nav:not(.left, .right) > .medium-space {
-  inline-size: 1rem;
-}
-
-nav:not(.left, .right) > .large-space {
-  inline-size: 1.5rem;
-}
-
-nav.tabbed {
-  background-color: var(--surface-container);
-  border-radius: 4rem !important;
-  gap: 0rem;
-  block-size: 4rem;
-}
-
-nav.tabbed.small {
-  block-size: 3rem;
-}
-
-nav.tabbed.large {
-  block-size: 5rem;
-}
-
-nav.tabbed > a {
-  border-radius: inherit;
-  block-size: inherit;
-  display: inline-flex;
-  align-items: center;
-  padding-inline: 1rem;
-  gap: 0.5rem;
-  font-size: 1rem;
-  flex: 1;
-}
-
-nav.tabbed > a.active {
-  background-color: var(--primary-container);
-}
-
-nav.toolbar {
-  display: inline-flex;
-  justify-content: space-around;
-  border-radius: 2rem;
-  background-color: var(--surface-container);
-  color: var(--on-surface);
-  padding: 0 1rem;
-  gap: 0.5rem;
-  min-block-size: 4rem;
-  min-inline-size: 4rem;
-}
-
-nav.toolbar > a {
-  display: inline-flex;
-  gap: 0.5rem;
-  min-inline-size: 2.5rem;
-  min-block-size: 2.5rem;
-  border-radius: 1.75rem;
-}
-
-nav.toolbar > a:has(> :not(i)) {
-  padding: 0 1rem;
-}
-
-nav.toolbar > a.active {
-  background-color: var(--secondary-container);
-  color: var(--on-secondary-container);
-}
-
-nav.toolbar.fill {
-  background-color: var(--primary-container) !important;
-  color: var(--on-primary-container) !important;
-}
-
-nav.toolbar.fill > a.active {
-  background-color: var(--surface-container) !important;
-  color: var(--on-surface) !important;
-}
-
-nav.toolbar.vertical {
-  flex-direction: column !important;
-  min-inline-size: 4rem;
-  padding: 1rem 0;
-  align-self: center;
-  align-items: center !important;
-}
-
-nav.toolbar.vertical > a {
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-}
-
-nav.toolbar.vertical > a > :is(div, span):not(.badge, .tooltip) {
-  display: none;
-}
-
-nav.toolbar.max {
-  border-radius: 0;
-  display: flex;
-}
-
-nav.group {
-  background: none !important;
-}
-
-nav.group:is(.connected, .split) {
-  gap: 0.125rem;
-}
-
-
-nav.group:not(.split) > :is(.button, button):not(.border) {
-  background-color: var(--surface-container);
-  color: var(--on-surface-container);
-}
-
-nav.group:not(.split) > :is(.button, button).active {
-  background-color: var(--primary);
-  color: var(--on-primary);
-}
-
-nav.group.connected > :is(.button, button):not(.border) {
-  background-color: var(--surface-container);
-  color: var(--on-surface-container);
-}
-
-nav.group.connected > :is(.button, button).active {
-  background-color: var(--secondary-container);
-  color: var(--on-secondary-container);
-}
-
-nav.group:is(.connected, .split) > :is(.button, button).active,
-nav.split > :is(.button, button):active {
-  border-radius: 2rem !important;
-}
-
-:not(nav) > :is(ul, ol) {
-  all: revert;
-}
-
-:is(.scroll, .no-scroll, .no-space, .tabs, .tabbed) > :focus-visible {
-  outline: 0.125rem solid var(--primary);
-  outline-offset: -0.125rem;
-}
-
-nav.split > :is(.button, button):not(.chip, .fill, .border) {
-  background-color: var(--primary);
-  color: var(--on-primary);
-}
-
-nav.group.primary-container > button,
-nav:is(.max, .toolbar, .tabbed, .group).primary > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).primary > a.active:not(.button, .chip) > i {
-  background-color: var(--primary-container) !important;
-  color: var(--on-primary-container) !important;
-}
-
-nav.group.primary > button,
-nav:is(.max, .toolbar, .tabbed, .group).primary-container > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).primary-container > a.active:not(.button, .chip) > i {
-  background-color: var(--primary) !important;
-  color: var(--on-primary) !important;
-}
-
-nav.group.secondary-container > button,
-nav:is(.max, .toolbar, .tabbed, .group).secondary > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).secondary > a.active:not(.button, .chip) > i {
-  background-color: var(--secondary-container) !important;
-  color: var(--on-secondary-container) !important;
-}
-
-nav.group.secondary > button,
-nav:is(.max, .toolbar, .tabbed, .group).secondary-container > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).secondary-container > a.active:not(.button, .chip) > i {
-  background-color: var(--secondary) !important;
-  color: var(--on-secondary) !important;
-}
-
-nav.group.tertiary-container > button,
-nav:is(.max, .toolbar, .tabbed, .group).tertiary > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).tertiary > a.active:not(.button, .chip) > i {
-  background-color: var(--tertiary-container) !important;
-  color: var(--on-tertiary-container) !important;
-}
-
-nav.group.tertiary > button,
-nav:is(.max, .toolbar, .tabbed, .group).tertiary-container > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).tertiary-container > a.active:not(.button, .chip) > i {
-  background-color: var(--tertiary) !important;
-  color: var(--on-tertiary) !important;
-}
-
-@media only screen and (max-width: 600px) {
-  nav.top,
-  nav.bottom {
-    justify-content: space-around;
-  }
-}
+nav > :is(ol, ul),
+nav > :is(ol, ul) > li {
+  all: unset;
+}
+
+nav,
+.row,
+a.row {
+  display: flex;
+  align-items: center;
+  align-self: normal;
+  text-align: start;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+  border-radius: 0;
+}
+
+a.row,
+nav.row {
+  min-block-size: 3rem;
+  margin: 0;
+}
+
+:is(nav, .row, .max) > :only-child,
+:is(nav, .row, .max) > span > *,
+nav > :is(ol, ul) > li > :only-child,
+nav > :is(ol, ul) > li > span > * {
+  margin: 0;
+}
+
+:is(nav, .row) > :not(ul, ol, header, footer) {
+  margin: 0;
+  white-space: normal;
+  flex: none;
+}
+
+:is(nav, .row).min {
+  display: inline-flex;
+}
+
+:is(nav, .row, li).no-space {
+  gap: 0;
+}
+
+:is(nav, .row, li).tiny-space {
+  gap: 0.5rem;
+}
+
+:is(nav, .row, li).medium-space {
+  gap: 1.5rem;
+}
+
+:is(nav, .row, li).large-space {
+  gap: 2rem;
+}
+
+:is(nav, .row) > .max,
+:is(nav, .row) > :is(ol, ul) > .max {
+  flex: 1;
+}
+
+:is(nav, .row).wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+:is(header, footer) > :is(nav, .row) {
+  min-block-size: inherit;
+}
+
+nav:is(.left, .right, .top, .bottom) {
+  --_padding: 0.5rem;
+  --_top: calc(var(--_padding, 0) + var(--top, 0));
+  --_bottom: calc(var(--_padding, 0) + var(--bottom, 0));
+  position: sticky;
+  inset: 0;
+  border: 0;
+  color: var(--on-surface);
+  transform: none;
+  z-index: 100;
+  text-align: center;
+  padding: var(--_padding);
+  margin: 0;
+}
+
+nav:is(.left, .right) {
+  justify-content: flex-start;
+  flex-direction: column;
+  background-color: var(--surface);
+  block-size: 100dvh;
+  min-inline-size: 6rem;
+  padding-block: var(--_top) var(--_bottom);
+}
+
+nav:is(.top, .bottom) {
+  position: sticky;
+  inset: 0;
+  padding: 0.5rem;
+  justify-content: center;
+  flex-direction: row;
+  background-color: var(--surface-container);
+  block-size: auto;
+  min-block-size: 4.5rem;
+}
+
+nav.top {
+  block-size: calc(var(--top, 0) + 4.5rem);
+  padding-block-start: var(--_top);
+}
+
+nav.bottom {
+  block-size: calc(var(--bottom, 0) + 4.5rem);
+  padding-block-end: var(--_bottom);
+}
+
+nav > header {
+  min-block-size: auto;
+  padding: 0;
+  margin: 0 0 1rem 0;
+  align-items: flex-start;
+  gap: 1rem;
+  background: none !important;
+}
+
+nav:is(.top, .bottom) > header {
+  flex-direction: row;
+  align-items: center;
+  margin: 0 1rem 0 0;
+}
+
+nav > header > * {
+  margin: 0;
+}
+
+nav > header > .extend:hover {
+  --_padding: 0;
+  inline-size: var(--_size);
+}
+
+nav > header > .extend:hover > span:not([class]) {
+  display: none;
+}
+
+nav > :is(ol, ul) {
+  all: inherit;
+  min-inline-size: auto;
+  margin: 0;
+  padding: 0;
+  flex: auto;
+}
+
+nav.max:is(.left, .right, .top, .bottom) {
+  gap: 0;
+  inline-size: auto;
+  align-items: flex-start;
+  min-inline-size: 12.75rem;
+  padding: var(--_top) 1.25rem var(--_bottom) 1.25rem;
+}
+
+nav.max > :is(ol, ul) {
+  padding: 0;
+}
+
+nav.max > header {
+  margin: 0 0 1.25rem 0;
+}
+
+nav.max:is(.top, .bottom) > header {
+  margin: 0 1.25rem 0 0;
+}
+
+nav.max > header > .extend {
+  --_padding: 1.5rem;
+  inline-size: auto;
+  padding: 0 var(--_padding);
+}
+
+nav.max > header > .extend > span:not([class]) {
+  display: block;
+  margin-inline-start: var(--_padding);
+}
+
+nav.max > header > .extend > :is(img, svg) + span {
+  margin-inline-start: calc(1rem + var(--_padding, 0));
+}
+
+nav.max:is(.top, .bottom) {
+  padding: 0 0.5rem;
+  align-items: center;
+  min-inline-size: auto;
+  max-inline-size: none;
+}
+
+nav:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
+nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  line-height: normal;
+  inline-size: 3.5rem;
+  font-size: 0.8rem;
+}
+
+nav:not(.max):is(.left, .right, .top, .bottom) > a:not(.button, .chip) > i,
+nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) > i {
+  padding: 0.25rem 1rem;
+  border-radius: 2rem;
+  transition: padding var(--speed1) linear;
+  margin: 0 auto;
+}
+
+nav.max:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
+nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+  flex-direction: row;
+  gap: 0.5rem;
+  inline-size: auto;
+  block-size: 3.5rem;
+  padding: 0 1rem;
+  border-radius: 2rem;
+  font-size: inherit;
+}
+
+nav.max:is(.top, .bottom) > a:not(.button, .chip),
+nav.max:is(.top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+  gap: 0.25rem;
+  block-size: 2.5rem;
+  font-size: 0.8rem;
+}
+
+nav.max:is(.left, .right, .top, .bottom) > a.active:not(.button, .chip),
+nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a.active:not(.button, .chip),
+nav:is(.left, .right, .top, .bottom):not(.max) > a.active:not(.button, .chip) > i,
+nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol, ul) > li > a.active:not(.button, .chip) > i {
+  background-color: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+
+:is(nav, .row):is(.left-align, .top-align, .vertical) {
+  justify-content: flex-start;
+}
+
+:is(nav, .row):is(.right-align, .bottom-align) {
+  justify-content: flex-end;
+}
+
+:is(nav, .row):is(.center-align, .middle-align) {
+  justify-content: center;
+}
+
+:is(nav, .row):is(.left-align, .top-align, .vertical).vertical {
+  align-items: flex-start;
+}
+
+:is(nav, .row):is(.right-align, .bottom-align).vertical {
+  align-items: flex-end;
+}
+
+:is(nav, .row):is(.center-align, .middle-align).vertical {
+  align-items: center;
+}
+
+nav:not(.left, .right) > .space {
+  inline-size: 0.5rem;
+}
+
+nav:not(.left, .right) > .medium-space {
+  inline-size: 1rem;
+}
+
+nav:not(.left, .right) > .large-space {
+  inline-size: 1.5rem;
+}
+
+nav.tabbed {
+  background-color: var(--surface-container);
+  border-radius: 4rem !important;
+  gap: 0rem;
+  block-size: 4rem;
+}
+
+nav.tabbed.small {
+  block-size: 3rem;
+}
+
+nav.tabbed.large {
+  block-size: 5rem;
+}
+
+nav.tabbed > a {
+  border-radius: inherit;
+  block-size: inherit;
+  display: inline-flex;
+  align-items: center;
+  padding-inline: 1rem;
+  gap: 0.5rem;
+  font-size: 1rem;
+  flex: 1;
+}
+
+nav.tabbed > a.active {
+  background-color: var(--primary-container);
+}
+
+nav.toolbar {
+  display: inline-flex;
+  justify-content: space-around;
+  border-radius: 2rem;
+  background-color: var(--surface-container);
+  color: var(--on-surface);
+  padding: 0 1rem;
+  gap: 0.5rem;
+  min-block-size: 4rem;
+  min-inline-size: 4rem;
+}
+
+nav.toolbar > a {
+  display: inline-flex;
+  gap: 0.5rem;
+  min-inline-size: 2.5rem;
+  min-block-size: 2.5rem;
+  border-radius: 1.75rem;
+}
+
+nav.toolbar > a:has(> :not(i)) {
+  padding: 0 1rem;
+}
+
+nav.toolbar > a.active {
+  background-color: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+
+nav.toolbar.fill {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+
+nav.toolbar.fill > a.active {
+  background-color: var(--surface-container) !important;
+  color: var(--on-surface) !important;
+}
+
+nav.toolbar.vertical {
+  flex-direction: column !important;
+  min-inline-size: 4rem;
+  padding: 1rem 0;
+  align-self: center;
+  align-items: center !important;
+}
+
+nav.toolbar.vertical > a {
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+}
+
+nav.toolbar.vertical > a > :is(div, span):not(.badge, .tooltip) {
+  display: none;
+}
+
+nav.toolbar.max {
+  border-radius: 0;
+  display: flex;
+}
+
+nav.group {
+  background: none !important;
+}
+
+nav.group:is(.connected, .split) {
+  gap: 0.125rem;
+}
+
+
+nav.group:not(.split) > :is(.button, button):not(.border) {
+  background-color: var(--surface-container);
+  color: var(--on-surface-container);
+}
+
+nav.group:not(.split) > :is(.button, button).active {
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+nav.group.connected > :is(.button, button):not(.border) {
+  background-color: var(--surface-container);
+  color: var(--on-surface-container);
+}
+
+nav.group.connected > :is(.button, button).active {
+  background-color: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+
+nav.group:is(.connected, .split) > :is(.button, button).active,
+nav.split > :is(.button, button):active {
+  border-radius: 2rem !important;
+}
+
+:not(nav) > :is(ul, ol) {
+  all: revert;
+}
+
+:is(.scroll, .no-scroll, .no-space, .tabs, .tabbed) > :focus-visible {
+  outline: 0.125rem solid var(--primary);
+  outline-offset: -0.125rem;
+}
+
+nav.split > :is(.button, button):not(.chip, .fill, .border) {
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+nav.group.primary-container > button,
+nav:is(.max, .toolbar, .tabbed, .group).primary > :is(button, a).active,
+nav:not(.max, .toolbar, .tabbed, .group).primary > a.active:not(.button, .chip) > i {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+
+nav.group.primary > button,
+nav:is(.max, .toolbar, .tabbed, .group).primary-container > :is(button, a).active,
+nav:not(.max, .toolbar, .tabbed, .group).primary-container > a.active:not(.button, .chip) > i {
+  background-color: var(--primary) !important;
+  color: var(--on-primary) !important;
+}
+
+nav.group.secondary-container > button,
+nav:is(.max, .toolbar, .tabbed, .group).secondary > :is(button, a).active,
+nav:not(.max, .toolbar, .tabbed, .group).secondary > a.active:not(.button, .chip) > i {
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
+}
+
+nav.group.secondary > button,
+nav:is(.max, .toolbar, .tabbed, .group).secondary-container > :is(button, a).active,
+nav:not(.max, .toolbar, .tabbed, .group).secondary-container > a.active:not(.button, .chip) > i {
+  background-color: var(--secondary) !important;
+  color: var(--on-secondary) !important;
+}
+
+nav.group.tertiary-container > button,
+nav:is(.max, .toolbar, .tabbed, .group).tertiary > :is(button, a).active,
+nav:not(.max, .toolbar, .tabbed, .group).tertiary > a.active:not(.button, .chip) > i {
+  background-color: var(--tertiary-container) !important;
+  color: var(--on-tertiary-container) !important;
+}
+
+nav.group.tertiary > button,
+nav:is(.max, .toolbar, .tabbed, .group).tertiary-container > :is(button, a).active,
+nav:not(.max, .toolbar, .tabbed, .group).tertiary-container > a.active:not(.button, .chip) > i {
+  background-color: var(--tertiary) !important;
+  color: var(--on-tertiary) !important;
+}
+
+@media only screen and (max-width: 600px) {
+  nav.top,
+  nav.bottom {
+    justify-content: space-around;
+  }
+}