:host .grit-elevation-0, :root .grit-elevation-0 {
  box-shadow: 0px 0px 0px 0px rgba(33, 43, 54, 0.16), 0px 0px 0px 0px rgba(33, 43, 54, 0.16);
  z-index: 0;
}
:host .grit-elevation-1, :root .grit-elevation-1 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16), 0px 1px 1px 0px rgba(33, 43, 54, 0.16);
  z-index: 1;
}
:host .grit-elevation-2, :root .grit-elevation-2 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16), 0px 3px 4px 0px rgba(33, 43, 54, 0.1);
  z-index: 2;
}
:host .grit-elevation-3, :root .grit-elevation-3 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.08), 0px 8px 10px 0px rgba(33, 43, 54, 0.2);
  z-index: 3;
}
:host .grit-elevation-4, :root .grit-elevation-4 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.1), 0px 16px 16px 0px rgba(33, 43, 54, 0.12);
  z-index: 4;
}
:host .grit-elevation-5, :root .grit-elevation-5 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.1), 0px 24px 24px 0px rgba(33, 43, 54, 0.12);
  z-index: 5;
}

.grit-top-nav-bar * {
  box-sizing: border-box;
}
.grit-top-nav-bar__box-shadow {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16), 0px 1px 1px 0px rgba(33, 43, 54, 0.16);
}
.grit-top-nav-bar__spacer {
  min-height: var(--grit-top-nav-bar-height);
  max-height: var(--grit-top-nav-bar-height);
  position: relative;
  visibility: hidden;
}
.grit-top-nav-bar__content {
  position: relative;
  padding: var(--grit-top-nav-bar-padding-top) var(--grit-top-nav-bar-padding-right) var(--grit-top-nav-bar-padding-bottom) var(--grit-top-nav-bar-padding-left);
  min-height: var(--grit-top-nav-bar-height);
  max-height: var(--grit-top-nav-bar-height);
  display: flex;
  flex-direction: row;
  justify-content: var(--grit-top-nav-bar-content-justify);
  align-items: var(--grit-top-nav-bar-content-align);
  background: var(--grit-top-nav-bar-background);
  width: var(--grit-top-nav-bar-width);
}
.grit-top-nav-bar__content.fixed {
  position: fixed;
  top: var(--grit-top-nav-bar-top);
  right: var(--grit-top-nav-bar-right);
  bottom: var(--grit-top-nav-bar-bottom);
  left: var(--grit-top-nav-bar-left);
  z-index: var(--grit-top-nav-bar-z-index);
}
.grit-top-nav-bar__icon-parent {
  cursor: var(--grit-top-nav-bar-icon-cursor);
  pointer-events: all;
  height: 24px;
  width: 24px;
  max-height: 24px;
  max-width: 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.grit-top-nav-bar__icon-parent.hidden {
  cursor: default;
  pointer-events: none;
  visibility: hidden;
}
.grit-top-nav-bar__icon-parent grit-wc-icon i.material-icons {
  color: var(--grit-top-nav-bar-icon-color);
  transition: var(--grit-top-nav-bar-icon-color-transition);
}
.grit-top-nav-bar__icon-parent grit-wc-icon i.material-icons:hover {
  color: var(--grit-top-nav-bar-icon-hover-color);
}
.grit-top-nav-bar__image {
  width: 100%;
  max-height: calc(var(--grit-top-nav-bar-height) - (var(--grit-top-nav-bar-padding-top) + var(--grit-top-nav-bar-padding-bottom)));
  -o-object-fit: contain;
     object-fit: contain;
}