:host {
  display: block;
  flex: 1 1 auto;
  align-self: auto;
}
:host .gux-submenu-button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  place-content: stretch flex-start;
  align-items: center;
  inline-size: var(--gse-ui-flyoutMenu-width);
  block-size: var(--gse-ui-menu-option-height);
  padding: var(--gse-ui-menu-option-padding);
  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
  color: var(--gse-ui-menu-option-label-foregroundColor);
  background-color: var(--gse-ui-menu-option-default-backgroundColor);
}
:host .gux-submenu-button:focus-within, :host .gux-submenu-button:hover {
  background-color: var(--gse-ui-menu-option-hover-backgroundColor);
}
:host .gux-submenu-button.gux-submenu-button-active {
  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
  color: var(--gse-ui-menu-option-shortcut-selected-foregroundColor);
  background-color: var(--gse-ui-menu-option-selected-backgroundColor);
}
:host .gux-submenu-button .gux-submenu-button-text {
  flex: 1 1 auto;
  align-self: auto;
  order: 0;
  margin-inline-end: var(--gse-ui-menu-option-gap);
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:host .gux-submenu-button .gux-submenu-open-icon {
  flex: 0 0 auto;
  align-self: auto;
  order: 0;
}
:host .gux-submenu-wrapper {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  visibility: hidden;
  flex-direction: column;
  padding: var(--gse-ui-menu-padding);
  margin: 0;
  background-color: var(--gse-ui-menu-backgroundColor);
  border: none;
  border-radius: var(--gse-ui-menu-borderRadius);
  box-shadow: var(--gse-ui-menu-boxShadow);
  opacity: 0;
}
:host .gux-submenu-wrapper.gux-shown {
  visibility: visible;
  animation-name: fade-in;
  animation-duration: 100ms;
  animation-delay: 350ms;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}