@keenmate/pure-admin-core 2.2.0 → 2.3.1

package/src/scss/core-components/_buttons.scss

@@ -1,548 +1,565 @@
-/* ========================================
-   Button Components
-   Buttons, button groups, sizes, colors, states, and icon buttons
-   ======================================== */
-@use '../variables' as *;
-
-// Buttons
-.pa-btn {
-  display: inline-block;
-  height: $btn-height-base;
-  padding: $btn-padding-v $btn-padding-h;
-  border: $btn-border-width solid transparent;
-  border-radius: $border-radius;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all $transition-fast $easing-snappy;
-  background: none;
-  color: var(--pa-text-color-1);
-
-  &:hover {
-    transform: translateY($btn-hover-lift);
-  }
-
-  &--primary {
-    background-color: var(--pa-accent);
-    border-color: var(--pa-accent);
-    color: var(--pa-btn-primary-text);
-
-    &:hover {
-      background-color: var(--pa-accent);
-      filter: brightness($btn-hover-brightness);
-    }
-  }
-
-  &--secondary {
-    background-color: transparent;
-    border-color: var(--pa-border-color);
-    color: var(--pa-text-color-1);
-
-    &:hover {
-      background-color: var(--pa-main-bg);
-      border-color: var(--pa-accent);
-    }
-  }
-
-  &--xs {
-    height: $btn-height-xs;
-    padding: $btn-padding-xs-v $btn-padding-xs-h;
-    font-size: $font-size-xs;
-  }
-
-  &--sm {
-    height: $btn-height-sm;
-    padding: $btn-padding-sm-v $btn-padding-sm-h;
-    font-size: $font-size-sm;
-  }
-
-  &--lg {
-    height: $btn-height-lg;
-    padding: $btn-padding-lg-v $btn-padding-lg-h;
-    font-size: $font-size-base;
-  }
-
-  &--xl {
-    height: $btn-height-xl;
-    padding: $btn-padding-xl-v $btn-padding-xl-h;
-    font-size: $font-size-lg;
-  }
-
-  // Button variants (colors)
-  &--success {
-    background-color: var(--pa-btn-success-bg);
-    border-color: var(--pa-btn-success-bg);
-    color: var(--pa-btn-success-text);
-
-    &:hover {
-      background-color: var(--pa-btn-success-bg-hover);
-      border-color: var(--pa-btn-success-bg-hover);
-    }
-  }
-
-  &--warning {
-    background-color: var(--pa-btn-warning-bg);
-    border-color: var(--pa-btn-warning-bg);
-    color: var(--pa-btn-warning-text);
-
-    &:hover {
-      background-color: var(--pa-btn-warning-bg-hover);
-      border-color: var(--pa-btn-warning-bg-hover);
-    }
-  }
-
-  &--danger {
-    background-color: var(--pa-btn-danger-bg);
-    border-color: var(--pa-btn-danger-bg);
-    color: var(--pa-btn-danger-text);
-
-    &:hover {
-      background-color: var(--pa-btn-danger-bg-hover);
-      border-color: var(--pa-btn-danger-bg-hover);
-    }
-  }
-
-  &--info {
-    background-color: var(--pa-btn-info-bg);
-    border-color: var(--pa-btn-info-bg);
-    color: var(--pa-btn-info-text);
-
-    &:hover {
-      background-color: var(--pa-btn-info-bg-hover);
-      border-color: var(--pa-btn-info-bg-hover);
-    }
-  }
-
-  &--light {
-    background-color: var(--pa-btn-light-bg);
-    border-color: var(--pa-btn-light-bg);
-    color: var(--pa-btn-light-text);
-
-    &:hover {
-      background-color: var(--pa-btn-light-bg-hover);
-      border-color: var(--pa-btn-light-bg-hover);
-    }
-  }
-
-  &--dark {
-    background-color: var(--pa-btn-dark-bg);
-    border-color: var(--pa-btn-dark-bg);
-    color: var(--pa-btn-dark-text);
-
-    &:hover {
-      background-color: var(--pa-btn-dark-bg-hover);
-      border-color: var(--pa-btn-dark-bg-hover);
-    }
-  }
-
-  // Outline variants
-  &--outline-primary {
-    background-color: transparent;
-    border-color: var(--pa-accent);
-    color: var(--pa-accent);
-
-    &:hover {
-      background-color: var(--pa-accent);
-      color: var(--pa-btn-primary-text);
-    }
-  }
-
-  &--outline-secondary {
-    background-color: transparent;
-    border-color: var(--pa-btn-secondary-bg);
-    color: var(--pa-btn-secondary-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-secondary-bg);
-      color: var(--pa-btn-secondary-text);
-    }
-  }
-
-  &--outline-success {
-    background-color: transparent;
-    border-color: var(--pa-btn-success-bg);
-    color: var(--pa-btn-success-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-success-bg);
-      color: var(--pa-btn-success-text);
-    }
-  }
-
-  &--outline-warning {
-    background-color: transparent;
-    border-color: var(--pa-btn-warning-bg);
-    color: var(--pa-btn-warning-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-warning-bg);
-      color: var(--pa-btn-warning-text);
-    }
-  }
-
-  &--outline-danger {
-    background-color: transparent;
-    border-color: var(--pa-btn-danger-bg);
-    color: var(--pa-btn-danger-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-danger-bg);
-      color: var(--pa-btn-danger-text);
-    }
-  }
-
-  &--outline-info {
-    background-color: transparent;
-    border-color: var(--pa-btn-info-bg);
-    color: var(--pa-btn-info-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-info-bg);
-      color: var(--pa-btn-info-text);
-    }
-  }
-
-  // Theme color slot variants (color-1 through color-9)
-  @for $i from 1 through 9 {
-    &--color-#{$i} {
-      background-color: var(--pa-color-#{$i});
-      border-color: var(--pa-color-#{$i});
-      color: var(--pa-color-#{$i}-text);
-
-      &:hover {
-        filter: brightness($btn-hover-brightness);
-      }
-    }
-
-    &--outline-color-#{$i} {
-      background-color: transparent;
-      border-color: var(--pa-color-#{$i});
-      color: var(--pa-color-#{$i});
-
-      &:hover {
-        background-color: var(--pa-color-#{$i});
-        color: var(--pa-color-#{$i}-text);
-      }
-    }
-  }
-
-  // Button states
-  &:disabled {
-    opacity: $btn-disabled-opacity;
-    cursor: not-allowed;
-    transform: none !important;
-  }
-
-  &--loading {
-    position: relative;
-    pointer-events: none;
-    -webkit-text-fill-color: transparent;  // Hide text but preserve layout and currentColor for spinner
-    transition: none;
-
-    .pa-btn__spinner {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      width: $spinner-size;
-      height: $spinner-size;
-      border: $spinner-border-width solid transparent;
-      border-top: $spinner-border-width solid currentColor;
-      border-radius: 50%;
-      animation: pa-spin $animation-spin-duration linear infinite;
-    }
-  }
-
-  // Ripple effect
-  &--ripple {
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      border-radius: 50%;
-      background: $ripple-color;
-      transform: translate(-50%, -50%);
-      transition: width $ripple-transition-duration ease, height $ripple-transition-duration ease;
-      pointer-events: none;
-    }
-
-    &.pa-btn--ripple-active::before {
-      width: $ripple-size;
-      height: $ripple-size;
-    }
-  }
-
-  // Block button
-  &--block {
-    width: 100%;
-    display: block;
-  }
-
-  // Icon buttons
-  &--icon-only {
-    width: $btn-icon-only-size;
-    height: $btn-icon-only-size;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-
-    // Size-specific icon-only dimensions
-    &.pa-btn--xs {
-      width: $btn-icon-only-size-xs;
-      height: $btn-icon-only-size-xs;
-    }
-
-    &.pa-btn--sm {
-      width: $btn-icon-only-size-sm;
-      height: $btn-icon-only-size-sm;
-    }
-
-    &.pa-btn--lg {
-      width: $btn-icon-only-size-lg;
-      height: $btn-icon-only-size-lg;
-    }
-
-    &.pa-btn--xl {
-      width: $btn-icon-only-size-xl;
-      height: $btn-icon-only-size-xl;
-    }
-  }
-
-  &__icon {
-    margin-inline-end: $btn-icon-margin; // RTL: flips to margin-left
-
-    &:last-child {
-      margin-inline-end: 0;
-      margin-inline-start: $btn-icon-margin; // RTL: flips to margin-right
-    }
-  }
-
-  // Buttons with icons align to start like sidebar menu items
-  &:has(.pa-btn__icon) {
-    text-align: start; // RTL: flips to right
-    display: inline-flex;
-    align-items: center;
-    gap: $spacing-sm;
-
-    .pa-btn__icon {
-      width: $sidebar-icon-size;
-      min-width: $sidebar-icon-size;
-      // No fixed height - let button padding control height
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      margin: 0;
-
-      &:last-child {
-        margin: 0;
-      }
-    }
-  }
-
-  // Content alignment modifiers (position content within button)
-  // Button always keeps its horizontal padding (0.75rem on both sides)
-  // These classes control content position and remove icon padding on aligned sides
-
-  &--align-start {
-    justify-content: flex-start;
-
-    .pa-btn__icon {
-      padding-inline-start: 0; // RTL: flips to padding-right
-    }
-  }
-
-  &--align-end {
-    justify-content: flex-end;
-
-    .pa-btn__icon {
-      padding-inline-end: 0; // RTL: flips to padding-left
-    }
-  }
-
-  &--align-center {
-    justify-content: center;
-  }
-
-  &--align-justify {
-    justify-content: space-between;
-
-    .pa-btn__icon:first-child {
-      padding-inline-start: 0; // RTL: flips to padding-right
-    }
-
-    // Remove padding from last element (text or icon)
-    > *:last-child {
-      padding-inline-end: 0; // RTL: flips to padding-left
-    }
-  }
-}
-
-// Button Groups
-.pa-btn-group {
-  display: inline-flex;
-  gap: $btn-group-gap;
-  flex-wrap: wrap;
-  align-items: center;
-
-  // === Direction Variants ===
-  &--vertical {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  // === Vertical Alignment Variants ===
-  &--vertical#{&}--center {
-    align-items: center;
-  }
-
-  &--vertical#{&}--end {
-    align-items: flex-end;
-  }
-
-  &--vertical#{&}--stretch {
-    align-items: stretch;
-
-    .pa-btn {
-      width: 100%;
-    }
-  }
-
-  // === Responsive Direction Modifiers ===
-  @each $bp, $min-width in $grid-breakpoints {
-    &--#{$bp}-vertical {
-      @media (min-width: $min-width) {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-    }
-
-    &--#{$bp}-horizontal {
-      @media (min-width: $min-width) {
-        flex-direction: row;
-        align-items: center;
-      }
-    }
-  }
-
-  // === No Wrap Variant ===
-  &--nowrap {
-    flex-wrap: nowrap;
-  }
-
-  // Ensure tooltips on buttons appear above siblings
-  .pa-btn.pa-tooltip:hover {
-    position: relative;
-    z-index: $z-index-modal;
-  }
-
-}
-
-// === Split Button (primary action + dropdown toggle) ===
-.pa-btn-split {
-  position: relative;
-  display: inline-flex;
-
-  // RTL: reverse order so toggle is on inline-start side
-  [dir="rtl"] & {
-    flex-direction: row-reverse;
-  }
-
-  // Joined buttons with no gap
-  .pa-btn {
-    border-radius: 0;
-
-    &:first-child {
-      border-start-start-radius: $border-radius;
-      border-end-start-radius: $border-radius;
-      border-inline-end: none;
-    }
-  }
-
-  // Toggle button (chevron) - fixed square width
-  &__toggle {
-    border-start-end-radius: $border-radius;
-    border-end-end-radius: $border-radius;
-    border-inline-start: $border-width-base solid rgba(255, 255, 255, 0.25);
-    border-inline-end: none;
-    padding-inline: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: $btn-height-base;
-    min-width: $btn-height-base;
-
-    &.pa-btn--xs { width: $btn-height-xs; min-width: $btn-height-xs; }
-    &.pa-btn--sm { width: $btn-height-sm; min-width: $btn-height-sm; }
-    &.pa-btn--lg { width: $btn-height-lg; min-width: $btn-height-lg; }
-    &.pa-btn--xl { width: $btn-height-xl; min-width: $btn-height-xl; }
-  }
-
-  // Chevron icon - opt-in rotation on open
-  &__chevron {
-    transition: transform $transition-fast $easing-snappy;
-  }
-
-  &--open &__chevron {
-    transform: rotate(180deg);
-  }
-
-  // Dropdown menu (moved to body and positioned by Floating UI)
-  &__menu {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: max-content;
-    background: var(--pa-card-bg);
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius;
-    box-shadow: $shadow-2xl;
-    z-index: $z-index-dropdown;
-    padding: $spacing-xs 0;
-
-    &--open {
-      display: block;
-    }
-  }
-
-  // Menu items
-  &__item {
-    display: block;
-    width: 100%;
-    padding: $spacing-sm $spacing-base;
-    border: none;
-    background: none;
-    text-align: start;
-    font-size: $font-size-sm;
-    color: var(--pa-text-color);
-    cursor: pointer;
-    white-space: nowrap;
-
-    &:hover {
-      background-color: var(--pa-accent-hover);
-    }
-
-    &--danger {
-      color: var(--pa-btn-danger-bg);
-
-      &:hover {
-        background-color: var(--pa-btn-danger-bg);
-        color: var(--pa-btn-danger-text);
-      }
-    }
-  }
-}
-
+/* ========================================
+   Button Components
+   Buttons, button groups, sizes, colors, states, and icon buttons
+   ======================================== */
+@use '../variables' as *;
+
+// Buttons
+.pa-btn {
+  display: inline-block;
+  height: $btn-height-base;
+  padding: $btn-padding-v $btn-padding-h;
+  border: $btn-border-width solid transparent;
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all $transition-fast $easing-snappy;
+  background: none;
+  color: var(--pa-text-color-1);
+
+  &:hover {
+    transform: translateY($btn-hover-lift);
+  }
+
+  &--primary {
+    background-color: var(--pa-accent);
+    border-color: var(--pa-accent);
+    color: var(--pa-btn-primary-text);
+
+    &:hover {
+      background-color: var(--pa-accent);
+      filter: brightness($btn-hover-brightness);
+    }
+  }
+
+  &--secondary {
+    background-color: transparent;
+    border-color: var(--pa-border-color);
+    color: var(--pa-text-color-1);
+
+    &:hover {
+      background-color: var(--pa-main-bg);
+      border-color: var(--pa-accent);
+    }
+  }
+
+  &--xs {
+    height: $btn-height-xs;
+    padding: $btn-padding-xs-v $btn-padding-xs-h;
+    font-size: $font-size-xs;
+  }
+
+  &--sm {
+    height: $btn-height-sm;
+    padding: $btn-padding-sm-v $btn-padding-sm-h;
+    font-size: $font-size-sm;
+  }
+
+  &--lg {
+    height: $btn-height-lg;
+    padding: $btn-padding-lg-v $btn-padding-lg-h;
+    font-size: $font-size-base;
+  }
+
+  &--xl {
+    height: $btn-height-xl;
+    padding: $btn-padding-xl-v $btn-padding-xl-h;
+    font-size: $font-size-lg;
+  }
+
+  // Button variants (colors)
+  &--success {
+    background-color: var(--pa-btn-success-bg);
+    border-color: var(--pa-btn-success-bg);
+    color: var(--pa-btn-success-text);
+
+    &:hover {
+      background-color: var(--pa-btn-success-bg-hover);
+      border-color: var(--pa-btn-success-bg-hover);
+    }
+  }
+
+  &--warning {
+    background-color: var(--pa-btn-warning-bg);
+    border-color: var(--pa-btn-warning-bg);
+    color: var(--pa-btn-warning-text);
+
+    &:hover {
+      background-color: var(--pa-btn-warning-bg-hover);
+      border-color: var(--pa-btn-warning-bg-hover);
+    }
+  }
+
+  &--danger {
+    background-color: var(--pa-btn-danger-bg);
+    border-color: var(--pa-btn-danger-bg);
+    color: var(--pa-btn-danger-text);
+
+    &:hover {
+      background-color: var(--pa-btn-danger-bg-hover);
+      border-color: var(--pa-btn-danger-bg-hover);
+    }
+  }
+
+  &--info {
+    background-color: var(--pa-btn-info-bg);
+    border-color: var(--pa-btn-info-bg);
+    color: var(--pa-btn-info-text);
+
+    &:hover {
+      background-color: var(--pa-btn-info-bg-hover);
+      border-color: var(--pa-btn-info-bg-hover);
+    }
+  }
+
+  &--light {
+    background-color: var(--pa-btn-light-bg);
+    border-color: var(--pa-btn-light-bg);
+    color: var(--pa-btn-light-text);
+
+    &:hover {
+      background-color: var(--pa-btn-light-bg-hover);
+      border-color: var(--pa-btn-light-bg-hover);
+    }
+  }
+
+  &--dark {
+    background-color: var(--pa-btn-dark-bg);
+    border-color: var(--pa-btn-dark-bg);
+    color: var(--pa-btn-dark-text);
+
+    &:hover {
+      background-color: var(--pa-btn-dark-bg-hover);
+      border-color: var(--pa-btn-dark-bg-hover);
+    }
+  }
+
+  // Outline variants
+  &--outline-primary {
+    background-color: transparent;
+    border-color: var(--pa-accent);
+    color: var(--pa-accent);
+
+    &:hover {
+      background-color: var(--pa-accent);
+      color: var(--pa-btn-primary-text);
+    }
+  }
+
+  &--outline-secondary {
+    background-color: transparent;
+    border-color: var(--pa-btn-secondary-bg);
+    color: var(--pa-btn-secondary-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-secondary-bg);
+      color: var(--pa-btn-secondary-text);
+    }
+  }
+
+  &--outline-success {
+    background-color: transparent;
+    border-color: var(--pa-btn-success-bg);
+    color: var(--pa-btn-success-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-success-bg);
+      color: var(--pa-btn-success-text);
+    }
+  }
+
+  &--outline-warning {
+    background-color: transparent;
+    border-color: var(--pa-btn-warning-bg);
+    color: var(--pa-btn-warning-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-warning-bg);
+      color: var(--pa-btn-warning-text);
+    }
+  }
+
+  &--outline-danger {
+    background-color: transparent;
+    border-color: var(--pa-btn-danger-bg);
+    color: var(--pa-btn-danger-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-danger-bg);
+      color: var(--pa-btn-danger-text);
+    }
+  }
+
+  &--outline-info {
+    background-color: transparent;
+    border-color: var(--pa-btn-info-bg);
+    color: var(--pa-btn-info-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-info-bg);
+      color: var(--pa-btn-info-text);
+    }
+  }
+
+  // Theme color slot variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      background-color: var(--pa-color-#{$i});
+      border-color: var(--pa-color-#{$i});
+      color: var(--pa-color-#{$i}-text);
+
+      &:hover {
+        filter: brightness($btn-hover-brightness);
+      }
+    }
+
+    &--outline-color-#{$i} {
+      background-color: transparent;
+      border-color: var(--pa-color-#{$i});
+      color: var(--pa-color-#{$i});
+
+      &:hover {
+        background-color: var(--pa-color-#{$i});
+        color: var(--pa-color-#{$i}-text);
+      }
+    }
+  }
+
+  // Button states
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+
+  &--loading {
+    position: relative;
+    pointer-events: none;
+    -webkit-text-fill-color: transparent;  // Hide text but preserve layout and currentColor for spinner
+    transition: none;
+
+    .pa-btn__spinner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      width: $spinner-size;
+      height: $spinner-size;
+      border: $spinner-border-width solid transparent;
+      border-top: $spinner-border-width solid currentColor;
+      border-radius: 50%;
+      animation: pa-spin $animation-spin-duration linear infinite;
+    }
+  }
+
+  // Ripple effect
+  &--ripple {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: $ripple-color;
+      transform: translate(-50%, -50%);
+      transition: width $ripple-transition-duration ease, height $ripple-transition-duration ease;
+      pointer-events: none;
+    }
+
+    &.pa-btn--ripple-active::before {
+      width: $ripple-size;
+      height: $ripple-size;
+    }
+  }
+
+  // Block button
+  &--block {
+    width: 100%;
+    display: block;
+  }
+
+  // Icon buttons
+  &--icon-only {
+    width: $btn-icon-only-size;
+    height: $btn-icon-only-size;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+
+    // Size-specific icon-only dimensions
+    &.pa-btn--xs {
+      width: $btn-icon-only-size-xs;
+      height: $btn-icon-only-size-xs;
+    }
+
+    &.pa-btn--sm {
+      width: $btn-icon-only-size-sm;
+      height: $btn-icon-only-size-sm;
+    }
+
+    &.pa-btn--lg {
+      width: $btn-icon-only-size-lg;
+      height: $btn-icon-only-size-lg;
+    }
+
+    &.pa-btn--xl {
+      width: $btn-icon-only-size-xl;
+      height: $btn-icon-only-size-xl;
+    }
+  }
+
+  &__icon {
+    margin-inline-end: $btn-icon-margin; // RTL: flips to margin-left
+
+    &:last-child {
+      margin-inline-end: 0;
+      margin-inline-start: $btn-icon-margin; // RTL: flips to margin-right
+    }
+  }
+
+  &__label {
+    flex: 0 1 auto;
+  }
+
+  // Buttons with icons align to start like sidebar menu items
+  &:has(.pa-btn__icon) {
+    text-align: start; // RTL: flips to right
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-sm;
+
+    .pa-btn__icon {
+      width: $sidebar-icon-size;
+      min-width: $sidebar-icon-size;
+      // No fixed height - let button padding control height
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      margin: 0;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+  }
+
+  // Content alignment modifiers (position content within button)
+  // Button always keeps its horizontal padding (0.75rem on both sides)
+  // These classes control content position and remove icon padding on aligned sides
+
+  &--align-start {
+    justify-content: flex-start;
+
+    .pa-btn__icon {
+      padding-inline-start: 0; // RTL: flips to padding-right
+    }
+  }
+
+  &--align-end {
+    justify-content: flex-end;
+
+    .pa-btn__icon {
+      padding-inline-end: 0; // RTL: flips to padding-left
+    }
+  }
+
+  &--align-center {
+    justify-content: center;
+
+    .pa-btn__label {
+      flex: 1;
+      text-align: center;
+    }
+  }
+
+  &--align-justify {
+    justify-content: space-between;
+
+    .pa-btn__icon:first-child {
+      padding-inline-start: 0; // RTL: flips to padding-right
+    }
+
+    // Remove padding from last element (text or icon)
+    > *:last-child {
+      padding-inline-end: 0; // RTL: flips to padding-left
+    }
+  }
+}
+
+// Button Groups
+.pa-btn-group {
+  display: inline-flex;
+  gap: $btn-group-gap;
+  flex-wrap: wrap;
+  align-items: center;
+
+  // === Direction Variants ===
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  // === Vertical Alignment Variants ===
+  &--vertical#{&}--center {
+    align-items: center;
+  }
+
+  &--vertical#{&}--end {
+    align-items: flex-end;
+  }
+
+  &--vertical#{&}--stretch {
+    align-items: stretch;
+
+    .pa-btn {
+      width: 100%;
+    }
+  }
+
+  // === Responsive Direction Modifiers ===
+  @each $bp, $min-width in $grid-breakpoints {
+    &--#{$bp}-vertical {
+      @media (min-width: $min-width) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+
+    &--#{$bp}-horizontal {
+      @media (min-width: $min-width) {
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+
+  // === No Wrap Variant ===
+  &--nowrap {
+    flex-wrap: nowrap;
+  }
+
+  // Ensure tooltips on buttons appear above siblings
+  .pa-btn.pa-tooltip:hover {
+    position: relative;
+    z-index: $z-index-modal;
+  }
+
+}
+
+// === Split Button (primary action + dropdown toggle) ===
+.pa-btn-split {
+  position: relative;
+  display: inline-flex;
+
+// Joined buttons with no gap
+  .pa-btn {
+    border-radius: 0;
+
+    &:first-child {
+      border-start-start-radius: $border-radius;
+      border-end-start-radius: $border-radius;
+      border-inline-end: none;
+    }
+  }
+
+  // Toggle button (chevron) - fixed square width
+  &__toggle {
+    border-start-end-radius: $border-radius;
+    border-end-end-radius: $border-radius;
+    border-inline-start: $border-width-base solid rgba(255, 255, 255, 0.25);
+    padding-inline: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $btn-height-base;
+    min-width: $btn-height-base;
+
+    &.pa-btn--xs { width: $btn-height-xs; min-width: $btn-height-xs; }
+    &.pa-btn--sm { width: $btn-height-sm; min-width: $btn-height-sm; }
+    &.pa-btn--lg { width: $btn-height-lg; min-width: $btn-height-lg; }
+    &.pa-btn--xl { width: $btn-height-xl; min-width: $btn-height-xl; }
+  }
+
+  // Chevron icon - opt-in rotation on open
+  &__chevron {
+    transition: transform $transition-fast $easing-snappy;
+  }
+
+  &--open &__chevron {
+    transform: rotate(180deg);
+  }
+
+  // Dropdown menu (moved to body and positioned by Floating UI)
+  &__menu {
+    display: none;
+    flex-direction: column;
+    gap: $spacing-xs;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: max-content;
+    background: var(--pa-card-bg);
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius;
+    box-shadow: $shadow-2xl;
+    z-index: $z-index-dropdown;
+    padding: $spacing-xs 0;
+
+    &--open {
+      display: flex;
+    }
+  }
+
+  // Menu items
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    width: 100%;
+    padding: $spacing-sm $spacing-base;
+    border: none;
+    background: none;
+    text-align: start;
+    font-size: $font-size-sm;
+    color: var(--pa-text-color);
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--pa-accent-hover);
+    }
+
+    &--danger {
+      color: var(--pa-btn-danger-bg);
+
+      &:hover {
+        background-color: var(--pa-btn-danger-bg);
+        color: var(--pa-btn-danger-text);
+      }
+    }
+  }
+
+  &__item-icon {
+    width: $sidebar-icon-size;
+    min-width: $sidebar-icon-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    opacity: 0.7;
+  }
+}
+