@use "../../wc";

:host {
  display: block;
  max-width: 100%;
  --menu-gap: var(--zn-spacing-x-small);
}

.button-menu--no-gap {
  --menu-gap: 0;
}

.button-menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0;

  min-width: 34px;
  max-width: var(--zn-max-width);

  gap: var(--menu-gap);

  &--no-padding {
    padding: 0;
  }

  &__container {
    display: flex;
    flex-direction: row;
    gap: var(--menu-gap);
    margin: 0;
    max-width: calc(100% - 34px);

    &:empty {
      display: none;
    }
  }

  // Buttons are hoisted into __container, so anything left in the default slot
  // is non-visual (zn-confirm) and must not claim a flex gap.
  ::slotted(*) {
    display: contents;
  }

  zn-button {
    min-width: 34px;
    flex-shrink: 0;
  }
}