.button-group {
  display: flex;
  gap: var(--P08);
  justify-content: center;
  align-items: center;
  width: fit-content;

  &.button-group-full-width {
    width: 100%;
  }
}

.button-group-horizontal {
  flex-direction: row;
  gap: var(--Button-Group-Horizontal-Gap, var(--P08));

  & .btn {
    flex: 1 1 auto;
  }
}

.button-group-vertical {
  flex-direction: column;
  gap: var(--Button-Group-Vertical-Gap, var(--P08));
}

.button-group .btn {
  min-width: var(--Button-Min-Width, 48px);
  min-height: var(--Button-Min-Height, 24px);
}

.button-group.vertical {
  flex-direction: column;
}

.button-group.horizontal {
  flex-direction: row;
}

.button-group-accent :is(a, button).btn:first-of-type {
    background-color: var(--Button-Accent-Default-Background);
    color: var(--Button-Accent-Default-Text);
    border-color: var(--Button-Accent-Default-Border);

    &:focus,
    &:focus-visible {
        outline: var(--Stroke-S) solid var(--Button-Accent-Focused-Border-Focus);
    }

    &:hover:not(:disabled) {
        background-color: var(--Button-Accent-Hover-Background);
        color: var(--Button-Accent-Hover-Text);
        border-color: var(--Button-Accent-Hover-Border);
    }

    &:active:not(:disabled) {
        background-color: var(--Button-Accent-Pressed-Background);
        color: var(--Button-Accent-Pressed-Text);
        border-color: var(--Button-Accent-Pressed-Border);
    }
}

/* Mobile */
@media (width < 768px) {
  .button-group-horizontal {
    flex-direction: column;
    gap: var(--Button-Group-Vertical-Gap, var(--P08));

    & .btn {
      width: 100%;
    }
  }
}