/* Button Group Component
   ========================================================================== */

.btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn {
  position: relative;
  flex: 0 1 auto;
}

/* Remove border radius for middle buttons */
.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.btn-group > .btn:first-child:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Focus state layering */
.btn-group > .btn:focus {
  z-index: 1;
}

/* Vertical Button Group */
.btn-group--vertical {
  flex-direction: column;
  align-items: flex-start;
}

.btn-group--vertical > .btn {
  width: 100%;
}

.btn-group--vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.btn-group--vertical > .btn:first-child:not(:last-child) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.btn-group--vertical > .btn:last-child:not(:first-child) {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* Button Group Sizes */
.btn-group--sm > .btn {
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  font-size: var(--font-size-sm, 0.875rem);
}

.btn-group--md > .btn {
  /* Default size - inherits from .btn */
}

.btn-group--lg > .btn {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--font-size-lg, 1.125rem);
}