@layer base {
  :host .dds-button-group {
    display: inline-flex;
    flex-wrap: nowrap;
    border: none;
    cursor: pointer;
  }
}

@layer gap {
  /* :host([gap="none"]) {
    .dds-button-group {
      gap: var(--dds-size-25);
    }

    ::slotted(dds-button) {
      --dds-button-start-start-radius: none;
      --dds-button-start-end-radius: none;
      --dds-button-end-end-radius: none;
      --dds-button-end-start-radius: none;
    }

    ::slotted(dds-button:first-child) {
      --dds-button-start-start-radius: var(--dds-button-shared-radius);
      --dds-button-end-start-radius: var(--dds-button-shared-radius);
    }

    ::slotted(dds-button:last-child) {
      --dds-button-start-end-radius: var(--dds-button-shared-radius);
      --dds-button-end-end-radius: var(--dds-button-shared-radius);
    }
  } */
}

@layer reset, base, gap;
