// ButtonGroup component styles

.btn-group {
  display: inline-flex;
  border-radius: var(--border-radius, 4px);

  &--vertical {
    flex-direction: column;

    .btn-group__btn {
      &--first {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
      }

      &--last {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      &--middle {
        border-radius: 0;
        border-bottom: none;
      }
    }
  }

  &--full-width {
    display: flex;
    width: 100%;

    .btn-group__btn {
      flex: 1;
    }
  }

  &__btn {
    &--first {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &--last {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &--middle {
      border-radius: 0;
    }

    // Remove double borders between buttons
    &:not(:first-child) {
      margin-left: -1px;
    }

    // Ensure proper z-index for focus states
    &:hover,
    &:focus {
      z-index: 1;
    }
  }
}