/**
 * @prop --ic-z-index-navigation-menu: z-index of navigation menu
 */

:host {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100% !important;
  background: rgb(0 0 0 / 60%);
  z-index: var(--ic-z-index-navigation-menu);
}

.popout-modal {
  position: absolute;
  inset: 0;
}

.popout-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 16rem;
  bottom: 0;
  background-color: var(--ic-top-navigation-menu-background);
  color: var(--ic-top-navigation-nav-item);

  --ic-typography-color: var(--ic-top-navigation-nav-item);

  box-shadow: var(--ic-elevation-overlay);
  overflow-y: auto;
  overflow-x: hidden;
}

:host(.inline) .popout-menu {
  position: absolute;
}

.menu-close-button-container {
  position: relative;
  left: 11.875rem;
  padding: var(--ic-space-md) 0;
}

.nav-group-first {
  padding-bottom: 0;
}

.menu-buttons-container {
  padding: var(--ic-space-sm) 0;
  border-bottom: var(--ic-border-width) solid var(--ic-architectural-200);
}

.menu-buttons-container-nav-item-above {
  margin-top: var(--ic-space-md);
  border-top: var(--ic-border-width) solid var(--ic-architectural-200);
}

.menu-status-version-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ic-space-xs);
  padding: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);
}

.status-version-no-buttons {
  border-top: var(--ic-space-1px) solid var(--ic-architectural-200);
}

.menu-status {
  background-color: var(--ic-status-tag-neutral);

  --ic-typography-color: var(--ic-color-text-inverted);

  border-radius: var(--ic-space-md);
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--ic-space-xxs) var(--ic-space-sm);
}

.menu-version {
  border-radius: var(--ic-space-md);
  background-color: var(--ic-status-tag-outlined-background-neutral-contrast);

  --ic-typography-color: var(--ic-color-text-primary-light);

  padding: var(--ic-space-xxs) var(--ic-space-sm);
}

.menu-status-text,
.menu-version-text {
  overflow-wrap: break-word;
}

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