@asphalt-react/appbar/dist/index.css

Appbar

.Appbar__63dIe {
  --surface: var(--static-surface-primary, #ffffff);
  --border-color: var(--static-border-secondary, #dce5f0);
  --border: 1px solid var(--border-color);

  background-color: var(--surface);
  border-bottom: var(--border);
  min-height: 3.5rem;
  display: flex;
}

.content__nqUsO {
  display: flex;
  overflow-y: unset;
  flex: 1;
}

.toggleBtn__0VRqf {
  display: none;
}

.head__5-R9i {
  display: flex;
  flex: none;
  border-bottom: none;
}

.tail__Z5pxo {
  display: flex;
}

.noContent__qAw3W {
  flex: 1;
}

@media screen and (max-width: 600px) {
  .Appbar__63dIe {
    border-bottom: var(--border);
  }

  .AppbarExpanded__P514U {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    border-bottom: none;
    display: block;
  }

  .headExpanded__ng5mo {
    --border-color: var(--static-border-secondary, #dce5f0);
    border-bottom: var(--border);
  }

  .content__nqUsO {
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    width: 100%;
    flex: none;
  }

  .toggleBtn__0VRqf {
    display: flex;
  }

  .contentExpanded__wy0Vn {
    display: block;
  }

  .head__5-R9i {
    display: flex;
    flex: 1;
    padding: var(--space-navigation-XS, 0.5rem);
  }

  .tail__Z5pxo {
    padding: var(--space-navigation-XS, 0.5rem);
  }

  .tailExpanded__oa7Rz {
    display: none;
  }
}

.BaseAppbar__g1OAe {
  --surface: var(--static-surface-primary, #ffffff);

  background: var(--surface);
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-navigation-L, 1rem);
  padding-inline: calc(var(--space-navigation-L, 1rem) * 2);
  box-sizing: border-box;
  width: 100%;
}

.bezelless__nN1uY {
  padding: 0;
}

@media screen and (max-width: 600px) {
  .BaseAppbar__g1OAe {
    padding: 0;
    flex-wrap: wrap;
    gap: 0;
  }
}

.AppbarHead__IHqGF {
  display: inline-flex;
  gap: var(--space-navigation-L, 1rem);
  align-items: center;
  box-sizing: border-box;
  flex: none;
}

@media screen and (max-width: 600px) {
  .AppbarHead__IHqGF {
    flex: 1;
    gap: var(--space-navigation-XS, 0.5rem);
  }

  .bezelless__9PCnv {
    padding: 0;
  }
}

.AppbarBody__s9hA8 {
  box-sizing: border-box;
  flex: 1;
}

.AppbarTail__WZuvH {
  display: inline-flex;
  flex: none;
  gap: var(--space-navigation-L, 1rem);
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .AppbarTail__WZuvH {
    gap: var(--space-navigation-XS, 0.5rem);
  }

  .bezelless__yK8cL {
    padding: 0;
  }
}

.List__Sk5tG {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-navigation-2XS, 0.125rem);
}

@media screen and (max-width: 600px) {
  .List__Sk5tG {
    flex-direction: column;
    gap: 0;
  }
}

.NavItem__QrR3L {
  margin: 0;
}

.NavItemIcon__-NAaQ {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.NavItemCaption__3opuI {
  flex: 1;
}

.NavItemAction__yHcxq {
  display: inline-flex;
  gap: var(--space-navigation-XS, 0.5rem);
  flex: 0 0 auto;
  align-items: center;
}

.NavLink__AztJU {
  --surface: transparent;
  --font: var(
    --text-bold-S,
    600 0.875rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  --font-color: var(--content-muted, #8e919b);
  --indicator-thickness: var(--indicator, 0.25rem);
  --border-radius: var(--roundness-menu, 0.375rem);
  --focus-appearance: var(--focus-outline, 2px solid);
  --focus-color: var(--interactive-focus, #86afff);
  --focus: var(--focus-appearance) var(--focus-color);

  background: var(--surface);
  color: var(--font-color);
  font: var(--font);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline-offset: 0;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--border-radius);
}

@media (hover: hover) and (pointer: fine) {
  .NavLink__AztJU:hover {
    --font-color: var(--content-primary, #2d2e34);
    --surface: var(--interactive-surface-primary-hover, #f5f7fa);
    text-decoration: none;
  }
}

.NavLink__AztJU:active {
  text-decoration: none;
  /* To add border styles for active state without taking space for border in box model */
  box-shadow: inset 0px 0px 0px 1px var(--interactive-active, #1c3abb);
}

@supports not selector(:focus-visible) {
  .NavLink__AztJU:focus {
    outline: var(--focus);
  }
}

.NavLink__AztJU:focus-visible {
  outline: var(--focus);
}

.indicatorWrap__kdNqF {
  width: 100%;
  padding-inline: var(--space-navigation-XS, 0.5rem);
  display: none;
}

.indicator__-zWqN {
  display: block;
  width: 100%;
  border-radius: 2px;
  height: var(--indicator-thickness);
  background: transparent;
}

.NavItemContent__JVCbs {
  display: flex;
  gap: var(--space-navigation-XS, 0.5rem);
  align-items: center;
  box-sizing: border-box;
  padding: var(--space-navigation-XL, 1.125rem)
    var(--space-navigation-2XL, 1.5rem);
}

.prominentContent__4-Hlf {
  padding: var(--space-navigation-XL, 1.125rem)
    var(--space-navigation-2XL, 1.5rem)
    calc(var(--space-navigation-XL, 1.125rem) - var(--indicator-thickness));
}

.prominent__uo64x,
.highlight__F8mqc {
  --font-color: var(--content-primary, #2d2e34);
  --surface: var(--interactive-highlighted-secondary, #f0f2f4);
}

.showIndicator__lcY-8 {
  display: flex;
}

.visible__OKX7Z {
  background: var(--interactive-accent, #5070fd);
}

.prominentContent__4-Hlf.icon__YsBio {
  padding: var(--space-navigation-XL, 1.125rem)
    var(--space-navigation-2XL, 1.5rem)
    calc(var(--space-navigation-XL, 1.125rem) - var(--indicator-thickness));
}

.icon__YsBio {
  padding: var(--space-navigation-XL, 1.125rem)
    var(--space-navigation-2XL, 1.5rem);
}

.bezelless__ICNkD {
  padding: 0;
}

@media screen and (max-width: 600px) {
  .NavLink__AztJU {
    --font: var(
      --text-bold-S,
      600 0.875rem/1.5 Maison Neue,
      Helvetica,
      Open Sans,
      sans-serif
    );
    --border-radius: var(--roundness-sharp, 0rem);
    flex-direction: row;
    outline-offset: -2px;
    padding: var(--space-navigation-XL, 1.125rem)
      var(--space-navigation-2XL, 1.5rem);
    gap: calc(
      var(--space-navigation-XS, 0.5rem) + var(--space-navigation-2XS, 0.125rem)
    );
  }

  .NavItemContent__JVCbs {
    flex: 1;
    padding: 0;
  }

  .indicatorWrap__kdNqF {
    width: var(--indicator-thickness);
    align-self: stretch;
    padding-inline: 0;
  }

  .indicator__-zWqN {
    height: 100%;
  }

  .prominentContent__4-Hlf.icon__YsBio {
    padding: 0;
  }

  .bezelless__ICNkD {
    padding: 0;
  }
}