/**
 * @prop --ic-z-index-side-navigation: z-index of side navigation panel
 */

:host {
  display: block;

  --ic-typography-color: currentcolor;
  --side-navigation-position: fixed;
  --side-navigation-position-left: 0;
  --side-navigation-position-top: var(--ic-space-xxl);
  --side-navigation-height: var(--ic-space-xxl);
  --sm-side-navigation-top-bar-height: 3.5rem;
  --sm-side-navigation-collapsed-labels-width: 6rem;
  --sm-side-navigation-expand-transition-duration: var(
    --ic-transition-duration-slow
  );
  --side-navigation-width: 20rem;
  --sm-side-navigation-bottom-bar-height: 3.5rem;
  --keyline-lighten: var(--ic-space-1px) solid var(--ic-side-navigation-keyline);
  --keyline-darken: var(--ic-space-1px) solid var(--ic-state-layer-darken-20);
  --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);
  --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);

  z-index: var(--ic-z-index-side-navigation);
}

:host > * {
  box-sizing: border-box;
}

.side-navigation {
  display: flex;
  flex-direction: column;
  width: var(--side-navigation-width);
  color: var(--ic-side-navigation-text);
  position: var(--side-navigation-position);
  top: var(--side-navigation-position-top);
  left: calc(var(--side-navigation-width) * -1);
  bottom: 0;
  background-color: var(--ic-side-navigation-background);
  z-index: var(--ic-z-index-side-navigation);
}

:host(.ic-side-navigation-inline) .side-navigation {
  position: absolute;
  height: 100%;
}

:host(.anchor-right) .side-navigation {
  right: calc(var(--side-navigation-width) * -1);
}

.classification-spacing {
  margin-bottom: var(--ic-space-lg);
}

.navigation-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.side-navigation-inner {
  background-color: var(--ic-side-navigation-background);
  display: flex;
  flex-direction: column;
  flex: 1 1 4rem;
  overflow: auto;
}

:host(.ic-side-navigation-inline) .side-navigation-inner {
  flex: 1;
}

:host(.xs-menu-open) .side-navigation {
  transition: left var(--ic-easing-transition-slow);
  left: 0;
}

:host(:has(.xs-menu-open, .xs-menu-close)) ::slotted(ic-navigation-item) {
  --navigation-item-side-nav-right: var(--ic-space-xl);
}

:host(.xs-menu-close) .side-navigation {
  left: calc(var(--side-navigation-width) * -1);
  transition: left var(--ic-easing-transition-slow);
}

:host(.xs-menu-close) .side-navigation > * {
  visibility: hidden;
}

:host(.anchor-right.xs-menu-open) .side-navigation {
  right: 0;
  left: auto;
}

:host(.anchor-right.xs-menu-close) .side-navigation {
  right: calc(var(--side-navigation-width) * -1);
  left: auto;
  transition: right var(--ic-easing-transition-slow);
}

.bottom-wrapper {
  border-top: var(--keyline-lighten);
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: var(--ic-side-navigation-background);
  display: flex;
  flex-direction: column;
}

:host(.ic-side-navigation-inline) .bottom-wrapper {
  position: sticky;
}

:host(.ic-side-navigation-dark) .bottom-wrapper {
  border-top: var(--keyline-darken);
}

/* Mobile Top Bar */

.top-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: var(--side-navigation-height);
  padding: var(--ic-space-xs);
  box-sizing: border-box;
  background-color: var(--ic-side-navigation-background);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: var(--keyline-lighten);
  box-shadow: var(--ic-elevation-overlay);
  z-index: 2;
  overflow: hidden;
  visibility: visible;
}

:host(.ic-side-navigation-inline) .top-bar {
  position: absolute;
}

:host(.ic-side-navigation-dark) .top-bar {
  border-bottom: var(--keyline-darken);
}

.top-bar.dark a:focus {
  box-shadow: var(--ic-border-focus);
}

.app-title-wrapper {
  display: flex;
  margin-left: var(--ic-space-xs);
  border-left: var(--keyline-lighten);
  padding-left: var(--ic-space-xxs);
  color: var(--ic-side-navigation-text);
  align-items: center;
}

:host(.ic-side-navigation-dark) .app-title-wrapper {
  border-left: var(--keyline-darken);
}

.app-title-wrapper ic-typography h1 {
  margin: 0;
}

@media screen and (min-width: 340px) {
  .app-title-wrapper ic-typography {
    margin-left: var(--ic-space-xs);
  }
}

:host .title-link {
  display: flex;
  align-items: center;
  transition: box-shadow var(--ic-easing-transition-fast),
    background-color var(--ic-easing-transition-fast);
  text-decoration: none;
  padding: var(--ic-space-xxs);
  color: var(--ic-side-navigation-text);
}

:host .title-link:visited,
:host .title-link:active {
  color: var(--ic-side-navigation-text);
}

slot[name="app-title"]::slotted(a),
slot[name="app-icon"]::slotted(a) {
  color: var(--ic-side-navigation-text);
  outline: none;
  text-decoration: none;
  display: flex;
}

slot[name="app-title"]::slotted(ic-typography),
slot[name="app-title"]::slotted(a) {
  margin-left: var(--ic-space-xs) !important;
}

slot[name="app-title"]::slotted(a) {
  font: var(--ic-font-subtitle-small);
}

:host .title-link:hover {
  border-radius: var(--ic-border-radius);
  background-color: var(--ic-side-navigation-hover);
}

:host .title-link:active {
  background-color: var(--ic-side-navigation-pressed);
}

:host .title-link:focus,
:host .title-link:focus-within {
  border-radius: var(--ic-border-radius);
  box-shadow: var(--ic-border-focus);
  outline: var(--ic-hc-focus-outline);
  background-color: transparent;
}

:host .title-link ic-typography {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-title-wrapper ::slotted(svg) {
  fill: var(--ic-side-navigation-text);
}

.app-icon-container {
  display: none;
}

.button-label {
  display: flex;
  align-items: center;
}

.mobile-top-bar-menu-icon {
  display: flex;
}

.menu-button {
  width: 6.5rem;
}

.app-status-wrapper {
  inset: 0 var(--ic-space-sm) 0 3.5rem;
  width: auto;
  display: flex;
  gap: var(--ic-space-xs);
  padding: var(--ic-space-sm) 0;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 var(--ic-space-xs);
}

.app-status-wrapper .app-version {
  display: flex;
  overflow-wrap: break-word;
  padding-bottom: var(--ic-space-xxs);
}

.app-status-wrapper .app-status {
  display: flex;
  border-radius: 1rem;
  background-color: var(--ic-side-navigation-text);
  color: var(--ic-side-navigation-status-tag-text);
  padding: var(--ic-space-xxs) var(--ic-space-lg);
  min-width: 1rem;
}

.app-status-wrapper .app-status-text {
  overflow-wrap: break-word;
}

:host(.ic-side-navigation-dark) .app-status-wrapper .app-status {
  --ic-typography-color: var(--ic-architectural-white);
}

.navigation-landmark-title {
  position: absolute;
  width: var(--ic-space-1px);
  height: var(--ic-space-1px);
  padding: 0;
  margin: calc(-1 * var(--ic-space-1px));
  overflow: hidden;
}

/* Navigation Group */

::slotted(ic-navigation-group) {
  --navigation-group-height: 2.75rem;
  --navigation-group-justify-content: space-between;
  --navigation-group-hover: var(--ic-side-navigation-hover);
  --navigation-group-text-hover: var(--ic-side-navigation-text);
  --navigation-item-child-height: 3.5rem;
  --navigation-item-child-active: var(--ic-action-dark-bg-pressed);
  --navigation-item-child-color: var(--ic-side-navigation-text);
  --navigation-group-expand-toggle-padding: 0.25rem;
}

/* Navigation Items */

::slotted(ic-navigation-item),
::slotted(ic-navigation-group) {
  --navigation-item-justify-content: flex-start;
  --navigation-item-min-height: 56px;
  --navigation-item-height: auto;
}

/* Toggle Chevron */

.bottom-side-nav {
  position: relative;
  align-content: flex-end;
  min-height: var(--sm-side-navigation-top-bar-height);
}

.bottom-side-nav ic-divider {
  position: absolute;
  top: 0;
}

.primary-navigation {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  /* Hide scrollbar when required but keep functionality */
  scrollbar-width: none;
}

.primary-navigation::-webkit-scrollbar {
  display: none;
}

.primary-navigation,
.secondary-navigation {
  overflow-x: hidden;
}

.bottom-side-nav .menu-expand-button {
  position: absolute;
  display: none;
}

.menu-visibility-visible {
  visibility: visible;
  width: 100%;
}

.app-title-show {
  min-width: 15.5rem;
}

:host(.side-display) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: var(--side-navigation-position);
  left: 0;
  top: 0;
  bottom: 0;
}

:host(.side-display) .app-icon-container {
  height: 40px;
  display: flex;
  align-items: center;
}

:host(.side-display) .top-bar {
  --side-navigation-height: var(--sm-side-navigation-top-bar-height);

  position: relative;
  padding: 0;
  box-shadow: none;
}

:host(.ic-side-navigation-inline.side-display) .top-bar {
  position: sticky;
}

:host(.anchor-right.side-display) .top-bar {
  box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);
}

:host(.anchor-right.side-display) .bottom-wrapper {
  box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);
}

:host(.side-display) .side-navigation,
:host(.side-display) .top-bar {
  width: var(--sm-side-navigation-top-bar-height);
}

:host(.sm-collapsed.side-display) {
  width: var(--sm-side-navigation-top-bar-height);
  transition: width var(--ic-easing-transition-slow);
}

:host(.sm-collapsed.collapsed-labels.side-display) {
  width: var(--sm-side-navigation-collapsed-labels-width);
}

:host(.sm-expanded.side-display) {
  width: var(--side-navigation-width);
  transition: width var(--ic-easing-transition-slow);
  box-shadow: var(--ic-elevation-overlay);
}

:host(.side-display) .side-navigation {
  --side-navigation-position-top: 0;

  flex: 1;
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
}

:host(.ic-side-navigation-inline.side-display) .side-navigation {
  position: relative;
}

:host(.anchor-right.side-display) .side-navigation {
  left: auto;
  right: 0;
}

:host(.side-display) .app-title-wrapper {
  margin-left: 0;
  border-left: none;
  padding: var(--ic-space-xs) var(--ic-space-sm);
}

:host(.side-display) .app-title-wrapper ::slotted(svg) {
  height: var(--ic-space-lg);
  width: var(--ic-space-lg);
}

:host(.side-display) .app-title-wrapper ic-typography {
  font-weight: var(--ic-font-weight-semibold);
}

:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography {
  position: absolute;
  left: -9999px;
  opacity: 0;
  transition: opacity var(--ic-easing-transition-slow);
}

:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography:dir(rtl) {
  right: -9999px;
}

:host(.sm-expanded.side-display) ic-typography {
  position: relative;
  left: 0;
}

:host(.sm-expanded.side-display) :is(.side-navigation, .top-bar) {
  width: var(--side-navigation-width);
  transition: width var(--ic-easing-transition-slow);
}

:host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar) {
  width: var(--sm-side-navigation-top-bar-height);
  transition: width var(--ic-easing-transition-slow);
}

:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation, .top-bar) {
  left: auto;
  right: 0;
}

:host(.side-display) .app-status-wrapper,
:host(.sm-collapsed.side-display) .app-status-wrapper {
  display: none;
  margin-left: 0;
}

:host(.sm-expanded.side-display) .app-status-wrapper {
  display: flex;
  max-width: 16rem;
  margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));
}

:host(.side-display) .bottom-side-nav {
  justify-items: flex-end;
  align-items: flex-end;
  justify-content: flex-end;
  display: flex;
  outline: none;
}

:host(.side-display) .bottom-side-nav .menu-expand-button {
  padding-left: var(--ic-space-md);
  height: var(--sm-side-navigation-top-bar-height);
  width: 100%;
  color: var(--ic-side-navigation-text);
  background-color: transparent;
  outline: var(--ic-hc-focus-outline);
  border: none;
  cursor: pointer;
  display: flex;
  transition: var(--ic-easing-transition-fast);
}

:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button {
  height: 100%;
}

:host(.side-display) .bottom-side-nav .menu-expand-button svg {
  justify-items: flex-start;
  align-self: center;
  display: inline-block;
  width: var(--ic-space-lg);
  height: var(--ic-space-lg);
}

:host(.side-display) .bottom-side-nav .menu-expand-button:hover {
  background-color: var(--ic-side-navigation-hover);
}

:host(.side-display) .bottom-side-nav .menu-expand-button:focus {
  box-shadow: var(--ic-border-focus-inset);
  border-radius: var(--ic-border-radius-inset);
  background-color: transparent;
}

:host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg {
  transform: scaleX(1);
  transition: transform var(--ic-easing-transition-slow);
}

:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg {
  transform: scaleX(-1);
  transition: transform var(--ic-easing-transition-slow);
  align-self: flex-end;
  margin-bottom: 0.875rem;
}

:host(.anchor-right.sm-collapsed.side-display)
  .bottom-side-nav
  .menu-expand-button
  svg {
  transform: scaleX(-1);
}

:host(.anchor-right.sm-expanded.side-display)
  .bottom-side-nav
  .menu-expand-button
  svg {
  transform: scaleX(1);
}

:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item) {
  --navigation-item-label-opacity: 1;
}

:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),
:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {
  --navigation-item-label-opacity: 0;
  --navigation-item-min-height: 3.5rem;
  --navigation-item-height: 3.5rem;
}

:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),
:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {
  --navigation-item-label-opacity: 1;
  --navigation-item-height: auto;
  --navigation-item-min-height: 3.5rem;
  --navigation-item-width: 20rem;
  --navigation-item-side-nav-right: var(--ic-space-xl);
  --navigation-group-width: 20rem;
}

:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {
  --navigation-group-title-position: absolute;
  --navigation-group-title-position-left: -9999px;
  --navigation-group-title-opacity: none;
}

:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {
  --navigation-group-title-position: relative;
  --navigation-group-title-position-left: 0;
  --navigation-group-expand-toggle-padding: 0.25rem;
  --navigation-group-title-opacity: flex;
}

:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,
:host(.sm-collapsed.collapsed-labels.side-display) .top-bar {
  width: var(--sm-side-navigation-collapsed-labels-width);
}

:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button {
  padding: 0;
}

:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper {
  width: 100%;
  justify-content: center;
}

:host(.sm-collapsed.collapsed-labels.side-display)
  ::slotted(ic-navigation-group) {
  --navigation-group-justify-content: center;
  --navigation-item-label-opacity: 1;
  --navigation-group-item-min-width: 100%;
  --navigation-group-expand-toggle-padding: 1rem;
}

:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button {
  justify-content: center;
}

:host(.side-display) .collapsed-icon-labels-start {
  visibility: hidden;
  opacity: 0;
}

:host(.side-display) .collapsed-icon-labels-end {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity var(--ic-easing-transition-slow);
}

/* Media Queries */

@media screen and (max-width: 419px) {
  .top-bar {
    height: var(--side-navigation-height);
  }
}

@media screen and (max-width: 319px) {
  .side-navigation {
    width: 100%;
  }
}

@media screen and (min-width: 340px) {
  .app-icon-container {
    display: flex;
  }
}

@media screen and (min-width: 577px) {
  :host(.sm-collapsed) slot[name="app-title"]::slotted(ic-typography),
  :host(.sm-collapsed) slot[name="app-title"]::slotted(a) {
    position: absolute;
    left: -9999px;
    opacity: 0;
    transition: opacity var(--ic-easing-transition-slow);
  }

  @media (prefers-reduced-motion: reduce) {
    :host(.sm-collapsed) slot[name="app-title"]::slotted(ic-typography),
    :host(.sm-collapsed) slot[name="app-title"]::slotted(a) {
      transition: none;
    }
  }

  :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(ic-typography),
  :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(a) {
    right: -9999px;
  }

  :host(.sm-expanded) slot[name="app-title"]::slotted(a) {
    font: var(--ic-font-h3) !important;
    font-weight: var(--ic-font-weight-semibold) !important;
    margin-left: var(--ic-space-xs) !important;
  }
}

@media screen and (min-width: 993px) {
  :host(.side-display) {
    position: sticky;
    left: auto;
    top: 0;
    bottom: 0;
  }

  :host(.sm-expanded.side-display) {
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  .side-navigation,
  .top-bar {
    border-right: var(--ic-border-hc);
  }

  .menu-expand-button {
    color: Highlight !important;
  }

  slot[name="app-icon"]::slotted(svg) {
    fill: currentcolor;
  }
}

@media (prefers-reduced-motion: reduce) {
  :host(.xs-menu-open) .side-navigation,
  :host(.xs-menu-close) .side-navigation,
  :host(.anchor-right.xs-menu-close) .side-navigation,
  :host .title-link,
  :host(.sm-collapsed.side-display),
  :host(.sm-expanded.side-display),
  :host(.sm-collapsed.side-display) .app-title-wrapper ic-typography,
  :host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar),
  :host(.sm-expanded.side-display) :is(.side-navigation, .top-bar),
  :host(.side-display) .bottom-side-nav .menu-expand-button,
  :host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg,
  :host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg,
  :host(.side-display) .collapsed-icon-labels-end {
    transition: none;
  }
}