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

:host {
  display: contents;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;

  &--start {
    justify-content: flex-start;
  }

  &--grow {
    width: 100%;
    gap: 0;
  }

  &--gap {
    gap: var(--zn-spacing-x-small);
  }
}

// Ensure dropdown wrappers inside button-group participate in the flex layout
// without introducing gaps. The data attribute is set by the component logic.
::slotted([data-zn-button-group__dropdown]) {
  display: inline-flex !important;
}

:host([direction="vertical"]),
zn-button-group[direction="vertical"] {
  width: 100%;

  .button-group {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
  }

  ::slotted(*) {
    width: 100%;
  }
}