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

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

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

.button-menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--zn-spacing-small) 0;
  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);
  }

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