@trimble-oss/moduswebcomponents/collection/components/modus-wc-navbar/modus-wc-navbar.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

modus-wc-navbar .modus-wc-navbar {
  background-color: var(--modus-wc-color-base-page);
  height: 56px;
  min-height: 0;
  padding: 0 var(--modus-wc-spacing-md);
}
modus-wc-navbar .modus-wc-navbar modus-wc-button {
  display: inline-flex;
}
modus-wc-navbar .modus-wc-navbar modus-wc-button svg {
  height: 24px;
}
modus-wc-navbar .modus-wc-navbar:not(.trimble-logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  background: var(--modus-wc-color-base-100);
  border: 0;
  box-shadow: none;
  color: var(--modus-wc-color-base-content);
}
modus-wc-navbar .modus-wc-navbar .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary.trimble-logo {
  background: transparent;
}
modus-wc-navbar .modus-wc-navbar .trimble-logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary path {
  fill: var(--modus-wc-color-primary);
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user, modus-wc-navbar .modus-wc-navbar [slot=end] .apps, modus-wc-navbar .modus-wc-navbar [slot=end] .notifications, modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu, modus-wc-navbar .modus-wc-navbar [slot=start] .main-menu {
  position: absolute;
  top: 45px;
  z-index: 99;
}
modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.user, modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.apps, modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.notifications, modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu.hidden, modus-wc-navbar .modus-wc-navbar [slot=start] .hidden.main-menu {
  display: none;
}
modus-wc-navbar .modus-wc-navbar [slot=end] .visible.user, modus-wc-navbar .modus-wc-navbar [slot=end] .visible.apps, modus-wc-navbar .modus-wc-navbar [slot=end] .visible.notifications, modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu.visible, modus-wc-navbar .modus-wc-navbar [slot=start] .visible.main-menu {
  display: block;
}
modus-wc-navbar .modus-wc-navbar [slot=end], modus-wc-navbar .modus-wc-navbar [slot=center], modus-wc-navbar .modus-wc-navbar [slot=start] {
  align-items: center;
  display: flex;
  position: relative;
}
modus-wc-navbar .modus-wc-navbar [slot=start] modus-wc-button {
  padding-inline-end: var(--modus-wc-spacing-sm);
}
modus-wc-navbar .modus-wc-navbar [slot=start] .main-menu {
  height: calc(100dvh - 56px);
  left: calc(-1 * var(--modus-wc-spacing-md));
  min-width: 256px;
}
modus-wc-navbar .modus-wc-navbar [slot=start] .trimble-logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  padding: 0 var(--modus-wc-spacing-lg);
}
modus-wc-navbar .modus-wc-navbar [slot=start] .trimble-logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary svg {
  height: 24px;
}
modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-button,
modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-text-input {
  padding-inline-start: var(--modus-wc-spacing-sm);
}
modus-wc-navbar .modus-wc-navbar [slot=end] button.ai svg {
  padding: 3px 0 3px 3px;
}
modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu {
  right: var(--modus-wc-spacing-2xl);
  z-index: 99;
}
modus-wc-navbar .modus-wc-navbar [slot=end] .notifications {
  right: 100px;
}
modus-wc-navbar .modus-wc-navbar [slot=end] .apps {
  right: var(--modus-wc-spacing-2xl);
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user {
  right: 0;
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card {
  align-items: center;
  padding: var(--modus-wc-spacing-xl);
  width: max-content;
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .initials {
  background-color: var(--modus-wc-color-black);
  border-radius: 50%;
  color: var(--modus-wc-color-white);
  font-weight: var(--modus-wc-font-weight-semibold);
  padding: var(--modus-wc-spacing-sm);
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .modus-wc-card-body {
  align-items: center;
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card modus-wc-button {
  padding: 0;
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .sign-out.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  color: var(--modus-wc-color-trimble-blue);
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user-button.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  background-color: var(--modus-wc-color-black);
  color: var(--modus-wc-color-white);
}
modus-wc-navbar .modus-wc-navbar [slot=end] .user-button.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary .modus-wc-avatar {
  height: 32px;
  width: 32px;
}

[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar svg,
[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar svg {
  height: 32px;
}
[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm,
[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm {
  font-size: var(--modus-wc-font-size-md);
  height: var(--modus-wc-input-height-md);
  line-height: var(--modus-wc-line-height-md);
  padding: var(--modus-wc-spacing-sm);
}

[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar {
  background-color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar:not(.trimble-logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  background: transparent;
}

[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar {
  background-color: var(--modus-wc-color-gray-10);
}
[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar:not(.trimble-logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  background: transparent;
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar .trimble-logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary path {
  fill: var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar .user modus-wc-card article.modus-wc-card .sign-out.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  color: var(--modus-wc-color-white);
}