@rolemodel/optics/dist/css/components/button_group.css

Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.

.btn-group {
  --op-btn-group-hover-z-index: 1;
  --op-btn-group-active-z-index: 2;
  --op-btn-group-focus-z-index: 3;

  display: inline-flex;
  align-items: center;

  .btn {
    + .btn {
      margin-inline-start: calc(var(--op-border-width) * -1);
    }

    &:hover {
      z-index: var(--op-btn-group-hover-z-index);
    }

    &.btn--active {
      z-index: var(--op-btn-group-active-z-index);
    }

    &:focus,
    &:focus-within,
    &:focus-visible {
      z-index: var(--op-btn-group-focus-z-index);
    }

    &:not(:first-child, :last-child) {
      border-radius: 0;
    }

    &:first-child:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }

    &:last-child:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
  }
}

.btn-group-toolbar {
  display: flex;
  flex-wrap: wrap;
}