/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
:host {
  --wcs-galactic-menu-background-color: var(--wcs-semantic-color-background-surface-brand);
  --wcs-galactic-menu-padding-horizontal: var(--wcs-semantic-spacing-large);
  --wcs-galactic-menu-gap: var(--wcs-semantic-spacing-large);
  --wcs-galactic-menu-height: var(--wcs-semantic-size-s);
  --wcs-galactic-menu-icon-focus-outline-color: var(--wcs-galactic-text-color, white); /* Inherit from galactic */
  --wcs-galactic-menu-overlay-color: var(--wcs-semantic-color-text-inverse);
  --wcs-galactic-menu-overlay-background-color: var(--wcs-semantic-color-background-surface-inverse);
  --wcs-galactic-menu-overlay-padding: var(--wcs-semantic-spacing-large);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--wcs-galactic-menu-height);
  gap: var(--wcs-galactic-menu-gap);
  padding: 0 var(--wcs-galactic-menu-padding-horizontal);
  background-color: var(--wcs-galactic-menu-background-color);
}

#menu {
  display: none;
  background-color: var(--wcs-galactic-menu-overlay-background-color);
  color: var(--wcs-galactic-menu-overlay-color);
  padding: var(--wcs-galactic-menu-overlay-padding);
  --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-text-inverse, white);
}

#menu[data-show] {
  display: block;
  z-index: 9999;
}

#menu[data-popper-placement^=top] > #arrow {
  bottom: -4px;
}

#menu[data-popper-placement^=bottom] > #arrow {
  top: -4px;
}

#menu[data-popper-placement^=left] > #arrow {
  right: -4px;
}

#menu[data-popper-placement^=right] > #arrow {
  left: -4px;
}

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow {
  visibility: hidden;
}

#arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}

button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  user-select: none;
}
button:focus-visible {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);
  outline-offset: 0;
  border-radius: 0.1rem;
}