@layer env.components {
  .env-button-group {
    display: inline-flex;
    align-items: stretch;
    gap: var(--env-control-border-width);
    inline-size: fit-content;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: auto;
    scrollbar-width: thin;
    --env-button-focus-inner-ring: 0.25rem;
    --env-button-white-space: normal;
    --env-button-overflow-wrap: anywhere;
  }
  .env-button-group > .env-button:focus-visible {
    outline-offset: -2px;
  }
  .env-button-group > .env-button {
    block-size: auto;
  }
  .env-button-group
    > .env-button:not(
      :where(
        :nth-child(1 of .env-button:not([hidden])):nth-last-child(1 of .env-button:not([hidden]))
      )
    ) {
    border-radius: calc(var(--env-button-height) / 2);
  }
  .env-button-group > .env-button.env-icon-button {
    inline-size: var(--env-button-height);
    min-inline-size: var(--env-button-height);
  }
  .env-button-group > .env-button[hidden] {
    display: none;
  }
  .env-button-group[data-orientation='horizontal']
    > .env-button:not(:nth-child(1 of .env-button:not([hidden]))) {
    border-start-start-radius: var(--env-radius-xs);
    border-end-start-radius: var(--env-radius-xs);
  }
  .env-button-group[data-orientation='horizontal']
    > .env-button:not(:nth-last-child(1 of .env-button:not([hidden]))) {
    border-start-end-radius: var(--env-radius-xs);
    border-end-end-radius: var(--env-radius-xs);
  }
  .env-button-group[data-orientation='vertical'] {
    flex-direction: column;
  }
  .env-button-group[data-orientation='horizontal']
    > .env-button[data-variant='outline']:not(:nth-child(1 of .env-button:not([hidden]))) {
    margin-inline-start: calc(-2 * var(--env-control-border-width));
  }
  .env-button-group[data-orientation='vertical']
    > .env-button[data-variant='outline']:not(:nth-child(1 of .env-button:not([hidden]))) {
    margin-block-start: calc(-2 * var(--env-control-border-width));
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  .env-button-group[data-orientation='vertical']
    > .env-button[data-variant='outline']:not(:nth-last-child(1 of .env-button:not([hidden]))) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .env-button-group[data-full-width] {
    display: flex;
    inline-size: 100%;
  }
  .env-button-group[data-full-width][data-orientation='horizontal']
    > .env-button:not(.env-icon-button) {
    flex: 1 1 auto;
  }
  .env-button-group[data-full-width][data-orientation='horizontal']:not(
      :has(> .env-button:not(.env-icon-button):not([hidden]))
    )
    > .env-button {
    flex: 1 1 0;
  }
  .env-button-group[data-orientation='vertical'] > .env-button {
    inline-size: 100%;
  }
  .env-button-group[data-orientation='vertical']
    > .env-button:not(:nth-child(1 of .env-button:not([hidden]))) {
    border-start-start-radius: var(--env-radius-xs);
    border-start-end-radius: var(--env-radius-xs);
  }
  .env-button-group[data-orientation='vertical']
    > .env-button:not(:nth-last-child(1 of .env-button:not([hidden]))) {
    border-end-start-radius: var(--env-radius-xs);
    border-end-end-radius: var(--env-radius-xs);
  }
  .env-button-group:is(
    :has(> .env-button:not([hidden])[data-variant='outline']):has(
      > .env-button:not([hidden]):not([data-variant='outline'])
    ),
    :has(> .env-button:not([hidden])[data-variant='ghost']):has(
      > .env-button:not([hidden]):not([data-variant='ghost'])
    ),
    :has(> .env-button:not([hidden])[data-variant='text']):has(
      > .env-button:not([hidden]):not([data-variant='text'])
    )
  ) {
    gap: var(--env-space-2);
  }
  .env-button-group:is(
      :has(> .env-button:not([hidden])[data-variant='outline']):has(
        > .env-button:not([hidden]):not([data-variant='outline'])
      ),
      :has(> .env-button:not([hidden])[data-variant='ghost']):has(
        > .env-button:not([hidden]):not([data-variant='ghost'])
      ),
      :has(> .env-button:not([hidden])[data-variant='text']):has(
        > .env-button:not([hidden]):not([data-variant='text'])
      )
    )
    > .env-button {
    border-radius: calc(var(--env-button-height) / 2);
    margin: 0;
  }
}