@ivds/core 0.1.1 → 1.1.0

package/lib/components/button/button.css

@@ -1,40 +1,74 @@
-/* Button component styles*/
-/* Provides styling for the IVDS button component with all variants, sizes, and states*/
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity, at-rule-empty-line-before */
 @keyframes ivds-button-spin {
   to {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }
 .ivds-button {
+  --background-color: transparent;
+  --color: var(--ivds-text-primary, #121a24);
+  --border-color: transparent;
+  --hover-background-color: transparent;
+  --hover-border-color: transparent;
+  --active-background-color: transparent;
+  --disabled-background-color: var(--ivds-surface-muted, #f1f3f5);
+  --disabled-border-color: var(--ivds-border-subtle, #e2e7ec);
+  --disabled-color: var(--ivds-text-muted, #6b7785);
+  --font-size: var(--fontSize-base, 1rem);
+  --min-height: 48px;
+  --padding-block: var(--spacing-3, 0.75rem);
+  --padding-inline: var(--spacing-6, 1.5rem);
+  --border-radius: var(--ivds-radius-s, 0.125rem);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: var(--borderWidth-1, 1px) solid transparent;
-  border-radius: var(--borderRadius-md, 0.375rem);
-  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
-  font-weight: var(--fontWeight-medium, 500);
-  line-height: var(--lineHeight-tight, 1.25);
+  gap: var(--spacing-2, 0.5rem);
+  min-width: 2.75rem;
+  min-height: var(--min-height);
+  padding: var(--padding-block) var(--padding-inline);
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--font-size);
+  font-weight: var(--fontWeight-bold, 700);
+  letter-spacing: 0.01em;
+  line-height: 1.1;
   text-decoration: none;
   cursor: pointer;
-  transition: all 0.15s ease-in-out;
   -webkit-user-select: none;
-     -moz-user-select: none;
+             -moz-user-select: none;
           user-select: none;
   white-space: nowrap;
+  position: relative;
+  transition: background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-button:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
 }
-.ivds-button:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
+.ivds-button:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.ivds-button:hover:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--hover-background-color);
+  border-color: var(--hover-border-color);
+}
+.ivds-button:active:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--active-background-color);
 }
 .ivds-button:disabled, .ivds-button[aria-disabled=true] {
-  opacity: 0.5;
+  background-color: var(--disabled-background-color);
+  border-color: var(--disabled-border-color);
+  color: var(--disabled-color);
   cursor: not-allowed;
   pointer-events: none;
 }
 .ivds-button {
-  padding: var(--spacing-3, 0.75rem) var(--spacing-6, 1.5rem);
-  font-size: var(--fontSize-base, 1rem);
-  min-height: 44px;
   gap: var(--spacing-2, 0.5rem);
 }
 .ivds-button .ivds-button__icon {
@@ -43,9 +77,6 @@
   justify-content: center;
   flex-shrink: 0;
 }
-.ivds-button {
-  /* Icon support*/
-}
 .ivds-button__icon {
   display: inline-flex;
   align-items: center;
@@ -53,169 +84,293 @@
   flex-shrink: 0;
 }
 .ivds-button__icon svg {
-  width: 1em;
-  height: 1em;
+  width: 1.15em;
+  height: 1.15em;
   fill: currentcolor;
 }
-.ivds-button {
-  /* Text content*/
-}
 .ivds-button__text {
   flex: 1;
 }
-.ivds-button {
-  /* Loading state*/
-}
 .ivds-button--loading {
   position: relative;
   color: transparent !important;
+  pointer-events: none;
 }
 .ivds-button--loading::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   border: 2px solid currentcolor;
-  border-radius: 50%;
-  border-top-color: transparent;
-  animation: ivds-button-spin 0.8s linear infinite;
-}
-.ivds-button {
-  /* Full width*/
+  border-radius: 9999px;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  transform: translate(-50%, -50%);
+  animation: ivds-button-spin 0.7s linear infinite;
+  color: inherit;
 }
 .ivds-button--full-width {
   width: 100%;
   justify-content: center;
 }
-.ivds-button {
-  /* Icon only*/
+.ivds-button--pill {
+  border-radius: var(--borderRadius-full, 9999px);
 }
 .ivds-button--icon-only {
-  width: 44px;
-  height: 44px;
-  padding: 0;
+  --min-height: 48px;
+  --padding-block: 0;
+  --padding-inline: 0;
+  width: 48px;
+  height: 48px;
 }
 .ivds-button--icon-only .ivds-button__icon {
   margin: 0;
 }
+.ivds-button--icon-only--circular {
+  --border-radius: var(--borderRadius-full, 9999px);
+}
 .ivds-button--icon-only.ivds-button--small {
-  width: 32px;
-  height: 32px;
-  padding: 0;
+  --min-height: 40px;
+  --padding-block: 0;
+  --padding-inline: 0;
+  width: 40px;
+  height: 40px;
 }
 .ivds-button--icon-only.ivds-button--small .ivds-button__icon {
   margin: 0;
 }
+.ivds-button--icon-only.ivds-button--small--circular {
+  --border-radius: var(--borderRadius-full, 9999px);
+}
 .ivds-button--icon-only.ivds-button--large {
+  --min-height: 56px;
+  --padding-block: 0;
+  --padding-inline: 0;
   width: 56px;
   height: 56px;
-  padding: 0;
 }
 .ivds-button--icon-only.ivds-button--large .ivds-button__icon {
   margin: 0;
 }
-/* Button Variants*/
-.ivds-button--primary {
-  background-color: var(--color-brand-primary-500, #f97316);
-  color: var(--color-semantic-neutral-50, #fafafa);
-  border-color: var(--color-brand-primary-500, #f97316);
-}
-.ivds-button--primary:hover:not(:disabled, [aria-disabled=true]) {
-  background-color: var(--color-brand-primary-600, #ea580c);
-  border-color: var(--color-brand-primary-600, #ea580c);
+.ivds-button--icon-only.ivds-button--large--circular {
+  --border-radius: var(--borderRadius-full, 9999px);
 }
-.ivds-button--primary:active:not(:disabled, [aria-disabled=true]) {
-  transform: translateY(1px);
+.ivds-button--primary {
+  --background-color: var(--ivds-interactive-primary-bg, #1058b8);
+  --color: var(--ivds-interactive-primary-text, #fff);
+  --border-color: var(--ivds-interactive-primary-bg, #1058b8);
+  --hover-background-color: var(--ivds-interactive-primary-bg-hover, #0b4593);
+  --hover-border-color: var(--ivds-interactive-primary-bg-hover, #0b4593);
+  --active-background-color: var(--ivds-interactive-primary-bg-active, #083775);
 }
 .ivds-button--secondary {
-  background-color: transparent;
-  color: var(--color-brand-primary-500, #f97316);
-  border-color: var(--color-brand-primary-500, #f97316);
-}
-.ivds-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
-  background-color: var(--color-brand-primary-50, #fff7ed);
-  border-color: var(--color-brand-primary-500, #f97316);
+  --background-color: var(--ivds-interactive-secondary-bg, #fff);
+  --color: var(--ivds-interactive-secondary-text, #0b4593);
+  --border-color: var(--ivds-interactive-secondary-border, #1058b8);
+  --hover-background-color: var(--ivds-interactive-secondary-bg-hover, #eef4ff);
+}
+.ivds-button--accent {
+  --background-color: var(--color-brand-accent-500, #1a6bdb);
+  --color: #fff;
+  --border-color: var(--color-brand-accent-500, #1a6bdb);
+  --hover-background-color: var(--color-brand-accent-600, #1058b8);
+  --hover-border-color: var(--color-brand-accent-600, #1058b8);
+  --active-background-color: var(--color-brand-accent-600, #1058b8);
 }
-.ivds-button--secondary:active:not(:disabled, [aria-disabled=true]) {
-  transform: translateY(1px);
-}
-.ivds-button--tertiary {
-  background-color: transparent;
-  color: var(--color-brand-primary-500, #f97316);
-  border-color: transparent;
+.ivds-button--success {
+  --background-color: var(--color-semantic-success-600, #0f6f4a);
+  --color: #fff;
+  --border-color: var(--color-semantic-success-600, #0f6f4a);
+  --hover-background-color: var(--color-semantic-success-700, #0a573a);
+  --hover-border-color: var(--color-semantic-success-700, #0a573a);
+  --active-background-color: var(--color-semantic-success-700, #0a573a);
 }
-.ivds-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
-  background-color: var(--color-brand-primary-50, #fff7ed);
+.ivds-button--warning {
+  --background-color: var(--color-semantic-warning-500, #ce790b);
+  --color: #fff;
+  --border-color: var(--color-semantic-warning-500, #ce790b);
+  --hover-background-color: var(--color-semantic-warning-600, #a76009);
+  --hover-border-color: var(--color-semantic-warning-600, #a76009);
+  --active-background-color: var(--color-semantic-warning-600, #a76009);
 }
-.ivds-button--tertiary:active:not(:disabled, [aria-disabled=true]) {
-  transform: translateY(1px);
+.ivds-button--danger {
+  --background-color: var(--color-semantic-error-500, #d73a50);
+  --color: #fff;
+  --border-color: var(--color-semantic-error-500, #d73a50);
+  --hover-background-color: var(--color-semantic-error-600, #b72a41);
+  --hover-border-color: var(--color-semantic-error-600, #b72a41);
+  --active-background-color: var(--color-semantic-error-600, #b72a41);
 }
-.ivds-button--success {
-  background-color: var(--color-semantic-success-500, #10b981);
-  color: var(--color-semantic-neutral-50, #fcfcfd);
-  border-color: var(--color-semantic-success-500, #10b981);
+.ivds-button--info {
+  --background-color: var(--color-semantic-info-600, #0050c8);
+  --color: #fff;
+  --border-color: var(--color-semantic-info-600, #0050c8);
+  --hover-background-color: var(--color-semantic-info-700, #003d99);
+  --hover-border-color: var(--color-semantic-info-700, #003d99);
+  --active-background-color: var(--color-semantic-info-700, #003d99);
+}
+.ivds-button--neutral {
+  --background-color: var(--color-semantic-neutral-900, #121a24);
+  --color: #fff;
+  --border-color: var(--color-semantic-neutral-900, #121a24);
+  --hover-background-color: var(--color-semantic-neutral-800, #202a36);
+  --hover-border-color: var(--color-semantic-neutral-800, #202a36);
+  --active-background-color: var(--color-semantic-neutral-800, #202a36);
+}
+.ivds-button--gradient-primary {
+  --border-color: transparent;
+  --color: #fff;
+  background: linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%);
+}
+.ivds-button--gradient-primary:hover:not(:disabled, [aria-disabled=true]) {
+  filter: brightness(0.95);
+}
+.ivds-button--gradient-secondary {
+  --border-color: transparent;
+  --color: #fff;
+  background: linear-gradient(135deg, var(--color-brand-secondary-500, #007a4d) 0%, var(--color-brand-secondary-700, #004d31) 100%);
+}
+.ivds-button--gradient-secondary:hover:not(:disabled, [aria-disabled=true]) {
+  filter: brightness(0.95);
+}
+.ivds-button--gradient-mixed {
+  --border-color: transparent;
+  --color: #fff;
+  background: linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-brand-accent-600, #1058b8) 100%);
+}
+.ivds-button--gradient-mixed:hover:not(:disabled, [aria-disabled=true]) {
+  filter: brightness(0.95);
+}
+.ivds-button--gradient-sunset {
+  --border-color: transparent;
+  --color: #fff;
+  background: linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-semantic-error-600, #b72a41) 100%);
+}
+.ivds-button--gradient-sunset:hover:not(:disabled, [aria-disabled=true]) {
+  filter: brightness(0.95);
+}
+.ivds-button--gradient-ocean {
+  --border-color: transparent;
+  --color: #fff;
+  background: linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%);
+}
+.ivds-button--gradient-ocean:hover:not(:disabled, [aria-disabled=true]) {
+  filter: brightness(0.95);
+}
+.ivds-button--outline-primary {
+  --background-color: var(--ivds-interactive-secondary-bg, #fff);
+  --color: var(--color-brand-accent-700, #0b4593);
+  --border-color: var(--color-brand-accent-600, #1058b8);
+  --hover-background-color: var(--color-brand-accent-50, #eef4ff);
+}
+.ivds-button--outline-secondary {
+  --background-color: var(--ivds-interactive-secondary-bg, #fff);
+  --color: var(--color-brand-secondary-700, #005234);
+  --border-color: var(--color-brand-secondary-600, #006640);
+  --hover-background-color: var(--color-brand-secondary-50, #eef8f3);
+}
+.ivds-button--outline-neutral {
+  --background-color: var(--ivds-interactive-secondary-bg, #fff);
+  --color: var(--color-semantic-neutral-800, #202a36);
+  --border-color: var(--color-semantic-neutral-500, #6b7785);
+  --hover-background-color: var(--color-semantic-neutral-100, #f1f3f5);
+}
+.ivds-button--ghost-primary, .ivds-button--tertiary,
+.ivds-button--supplementary {
+  --background-color: var(--ivds-interactive-supplementary-bg, #f1f3f5);
+  --border-color: transparent;
+  --color: var(--color-brand-accent-700, #0b4593);
+  --hover-background-color: var(--ivds-interactive-supplementary-bg-hover, #e2e7ec);
+}
+.ivds-button--ghost-secondary {
+  --background-color: var(--ivds-interactive-supplementary-bg, #f1f3f5);
+  --border-color: transparent;
+  --color: var(--color-brand-secondary-700, #005234);
+  --hover-background-color: var(--color-semantic-neutral-200, #e2e7ec);
+}
+.ivds-button--ghost-neutral, .ivds-button--ghost {
+  --background-color: var(--ivds-interactive-supplementary-bg, #f1f3f5);
+  --border-color: transparent;
+  --color: var(--color-semantic-neutral-800, #202a36);
+  --hover-background-color: var(--color-semantic-neutral-200, #e2e7ec);
+}
+.ivds-button--glass {
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-strong, #a1adba);
+  --color: var(--ivds-text-primary, #121a24);
+}
+.ivds-button--glass-dark {
+  --background-color: var(--color-semantic-neutral-900, #121a24);
+  --color: #fff;
+  --border-color: var(--color-semantic-neutral-900, #121a24);
+  --hover-background-color: var(--color-semantic-neutral-800, #202a36);
+  --hover-border-color: var(--color-semantic-neutral-800, #202a36);
+}
+.ivds-button--xs {
+  --padding-block: var(--spacing-1, 0.25rem);
+  --padding-inline: var(--spacing-3, 0.75rem);
+  --font-size: var(--fontSize-xs, 0.75rem);
+  --min-height: 32px;
 }
-.ivds-button--success:hover:not(:disabled, [aria-disabled=true]) {
-  background-color: var(--color-semantic-success-600, #059669);
-  border-color: var(--color-semantic-success-600, #059669);
+.ivds-button--small {
+  --padding-block: var(--spacing-2, 0.5rem);
+  --padding-inline: var(--spacing-4, 1rem);
+  --font-size: var(--fontSize-sm, 0.875rem);
+  --min-height: 40px;
 }
-.ivds-button--success:active:not(:disabled, [aria-disabled=true]) {
-  transform: translateY(1px);
+.ivds-button--large {
+  --padding-block: var(--spacing-4, 1rem);
+  --padding-inline: var(--spacing-8, 2rem);
+  --font-size: var(--fontSize-lg, 1.125rem);
+  --min-height: 56px;
 }
-.ivds-button--warning {
-  background-color: var(--color-semantic-warning-500, #f59e0b);
-  color: var(--color-semantic-neutral-50, #fcfcfd);
-  border-color: var(--color-semantic-warning-500, #f59e0b);
+.ivds-button--xl {
+  --padding-block: var(--spacing-5, 1.25rem);
+  --padding-inline: var(--spacing-10, 2.5rem);
+  --font-size: var(--fontSize-xl, 1.25rem);
+  --min-height: 64px;
 }
-.ivds-button--warning:hover:not(:disabled, [aria-disabled=true]) {
-  background-color: var(--color-semantic-warning-600, #d97706);
-  border-color: var(--color-semantic-warning-600, #d97706);
+.ivds-button-group {
+  display: inline-flex;
 }
-.ivds-button--warning:active:not(:disabled, [aria-disabled=true]) {
-  transform: translateY(1px);
+.ivds-button-group > .ivds-button {
+  border-radius: 0;
 }
-.ivds-button--danger {
-  background-color: var(--color-semantic-error-500, #ef4444);
-  color: var(--color-semantic-neutral-50, #fcfcfd);
-  border-color: var(--color-semantic-error-500, #ef4444);
+.ivds-button-group > .ivds-button:not(:first-child) {
+  margin-left: -2px;
 }
-.ivds-button--danger:hover:not(:disabled, [aria-disabled=true]) {
-  background-color: var(--color-semantic-error-600, #dc2626);
-  border-color: var(--color-semantic-error-600, #dc2626);
+.ivds-button-group > .ivds-button:first-child {
+  border-top-left-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);
 }
-.ivds-button--danger:active:not(:disabled, [aria-disabled=true]) {
-  transform: translateY(1px);
+.ivds-button-group > .ivds-button:last-child {
+  border-top-right-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);
 }
-.ivds-button--info {
-  background-color: var(--color-semantic-info-500, #3b82f6);
-  color: var(--color-semantic-neutral-50, #fcfcfd);
-  border-color: var(--color-semantic-info-500, #3b82f6);
+.ivds-button-group--vertical {
+  flex-direction: column;
 }
-.ivds-button--info:hover:not(:disabled, [aria-disabled=true]) {
-  background-color: var(--color-semantic-info-600, #2563eb);
-  border-color: var(--color-semantic-info-600, #2563eb);
+.ivds-button-group--vertical > .ivds-button {
+  border-radius: 0;
 }
-.ivds-button--info:active:not(:disabled, [aria-disabled=true]) {
-  transform: translateY(1px);
+.ivds-button-group--vertical > .ivds-button:not(:first-child) {
+  margin-left: 0;
+  margin-top: -2px;
 }
-/* Button Sizes*/
-.ivds-button--small {
-  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
-  font-size: var(--fontSize-sm, 0.875rem);
-  min-height: 32px;
+.ivds-button-group--vertical > .ivds-button:first-child {
+  border-top-left-radius: var(--ivds-radius-s, 0.125rem);
+  border-top-right-radius: var(--ivds-radius-s, 0.125rem);
 }
-.ivds-button--large {
-  padding: var(--spacing-4, 1rem) var(--spacing-8, 2rem);
-  font-size: var(--fontSize-lg, 1.125rem);
-  min-height: 56px;
+.ivds-button-group--vertical > .ivds-button:last-child {
+  border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);
 }
-/* Button Groups - Simplified to avoid specificity issues*/
-.ivds-button-group {
-  display: inline-flex;
+.ivds-button-group--gap {
+  gap: var(--spacing-2, 0.5rem);
 }
-.ivds-button-group--vertical {
-  flex-direction: column;
+.ivds-button-group--gap > .ivds-button {
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  margin: 0;
 }

package/lib/components/button/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.scss%23sass","../../../src/components/button/_button-mixin.scss","../../../src/components/button/button.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["// Button component styles\n/* stylelint-disable no-descending-specificity */\n\n@use 'button-mixin' as btn;\n\n.ivds-button {\n  @include btn.button-base;\n  @include btn.button-icon-spacing;\n\n  &__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1.15em;\n      height: 1.15em;\n      fill: currentcolor;\n    }\n  }\n\n  &__text {\n    flex: 1;\n  }\n\n  &--loading {\n    @include btn.button-loading;\n  }\n\n  &--full-width {\n    @include btn.button-full-width;\n  }\n\n  &--pill {\n    @include btn.button-pill;\n  }\n\n  &--icon-only {\n    @include btn.button-icon-only;\n\n    &.ivds-button--small {\n      @include btn.button-icon-only(40px);\n    }\n\n    &.ivds-button--large {\n      @include btn.button-icon-only(56px);\n    }\n  }\n}\n\n.ivds-button--primary {\n  @include btn.button-variant(\n    var(--ivds-interactive-primary-bg, #1058b8),\n    var(--ivds-interactive-primary-text, #fff),\n    var(--ivds-interactive-primary-bg, #1058b8),\n    var(--ivds-interactive-primary-bg-hover, #0b4593),\n    var(--ivds-interactive-primary-bg-hover, #0b4593),\n    var(--ivds-interactive-primary-bg-active, #083775)\n  );\n}\n\n.ivds-button--secondary {\n  @include btn.button-variant-outline(\n    var(--ivds-interactive-secondary-border, #1058b8),\n    var(--ivds-interactive-secondary-text, #0b4593),\n    var(--ivds-interactive-secondary-bg-hover, #eef4ff)\n  );\n}\n\n.ivds-button--accent {\n  @include btn.button-variant(\n    var(--color-brand-accent-500, #1a6bdb),\n    #fff,\n    var(--color-brand-accent-500, #1a6bdb),\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-600, #1058b8)\n  );\n}\n\n.ivds-button--success {\n  @include btn.button-variant(\n    var(--color-semantic-success-600, #0f6f4a),\n    #fff,\n    var(--color-semantic-success-600, #0f6f4a),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a)\n  );\n}\n\n.ivds-button--warning {\n  @include btn.button-variant(\n    var(--color-semantic-warning-500, #ce790b),\n    #fff,\n    var(--color-semantic-warning-500, #ce790b),\n    var(--color-semantic-warning-600, #a76009),\n    var(--color-semantic-warning-600, #a76009),\n    var(--color-semantic-warning-600, #a76009)\n  );\n}\n\n.ivds-button--danger {\n  @include btn.button-variant(\n    var(--color-semantic-error-500, #d73a50),\n    #fff,\n    var(--color-semantic-error-500, #d73a50),\n    var(--color-semantic-error-600, #b72a41),\n    var(--color-semantic-error-600, #b72a41),\n    var(--color-semantic-error-600, #b72a41)\n  );\n}\n\n.ivds-button--info {\n  @include btn.button-variant(\n    var(--color-semantic-info-600, #0050c8),\n    #fff,\n    var(--color-semantic-info-600, #0050c8),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99)\n  );\n}\n\n.ivds-button--neutral {\n  @include btn.button-variant(\n    var(--color-semantic-neutral-900, #121a24),\n    #fff,\n    var(--color-semantic-neutral-900, #121a24),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36)\n  );\n}\n\n.ivds-button--gradient-primary {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-secondary {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-secondary-500, #007a4d) 0%, var(--color-brand-secondary-700, #004d31) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-mixed {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-brand-accent-600, #1058b8) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-sunset {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-semantic-error-600, #b72a41) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-ocean {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%),\n    #fff\n  );\n}\n\n.ivds-button--outline-primary {\n  @include btn.button-variant-outline(\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-700, #0b4593),\n    var(--color-brand-accent-50, #eef4ff)\n  );\n}\n\n.ivds-button--outline-secondary {\n  @include btn.button-variant-outline(\n    var(--color-brand-secondary-600, #006640),\n    var(--color-brand-secondary-700, #005234),\n    var(--color-brand-secondary-50, #eef8f3)\n  );\n}\n\n.ivds-button--outline-neutral {\n  @include btn.button-variant-outline(\n    var(--color-semantic-neutral-500, #6b7785),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-100, #f1f3f5)\n  );\n}\n\n.ivds-button--ghost-primary {\n  @include btn.button-variant-ghost(\n    var(--color-brand-accent-700, #0b4593),\n    var(--ivds-interactive-supplementary-bg-hover, #e2e7ec)\n  );\n}\n\n.ivds-button--ghost-secondary {\n  @include btn.button-variant-ghost(\n    var(--color-brand-secondary-700, #005234),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n}\n\n.ivds-button--ghost-neutral {\n  @include btn.button-variant-ghost(\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n}\n\n.ivds-button--tertiary,\n.ivds-button--supplementary {\n  @extend .ivds-button--ghost-primary;\n}\n\n.ivds-button--ghost {\n  @extend .ivds-button--ghost-neutral;\n}\n\n.ivds-button--glass {\n  @include btn.button-variant-glass(var(--ivds-text-primary, #121a24));\n}\n\n.ivds-button--glass-dark {\n  @include btn.button-variant(\n    var(--color-semantic-neutral-900, #121a24),\n    #fff,\n    var(--color-semantic-neutral-900, #121a24),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36)\n  );\n}\n\n.ivds-button--xs {\n  @include btn.button-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-xs, 0.75rem), 32px);\n}\n\n.ivds-button--small {\n  @include btn.button-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-sm, 0.875rem), 40px);\n}\n\n.ivds-button--large {\n  @include btn.button-size(var(--spacing-4, 1rem), var(--spacing-8, 2rem), var(--fontSize-lg, 1.125rem), 56px);\n}\n\n.ivds-button--xl {\n  @include btn.button-size(var(--spacing-5, 1.25rem), var(--spacing-10, 2.5rem), var(--fontSize-xl, 1.25rem), 64px);\n}\n\n.ivds-button-group {\n  display: inline-flex;\n\n  > .ivds-button {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-left: -2px;\n    }\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n.ivds-button-group--vertical {\n  flex-direction: column;\n\n  > .ivds-button {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-left: 0;\n      margin-top: -2px;\n    }\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n.ivds-button-group--gap {\n  gap: var(--spacing-2, 0.5rem);\n\n  > .ivds-button {\n    border-radius: var(--ivds-radius-s, 0.125rem);\n    margin: 0;\n  }\n}\n","// Button component mixins and private styles\n/* stylelint-disable no-descending-specificity, at-rule-empty-line-before */\n\n@use '../../base/focus' as *;\n\n@keyframes ivds-button-spin {\n  to {\n    transform: translate(-50%, -50%) rotate(360deg);\n  }\n}\n\n@mixin button-base {\n  // Per-component CSS variable API\n  --background-color: transparent;\n  --color: var(--ivds-text-primary, #121a24);\n  --border-color: transparent;\n  --hover-background-color: transparent;\n  --hover-border-color: transparent;\n  --active-background-color: transparent;\n  --disabled-background-color: var(--ivds-surface-muted, #f1f3f5);\n  --disabled-border-color: var(--ivds-border-subtle, #e2e7ec);\n  --disabled-color: var(--ivds-text-muted, #6b7785);\n  --font-size: var(--fontSize-base, 1rem);\n  --min-height: 48px;\n  --padding-block: var(--spacing-3, 0.75rem);\n  --padding-inline: var(--spacing-6, 1.5rem);\n  --border-radius: var(--ivds-radius-s, 0.125rem);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-2, 0.5rem);\n  min-width: 2.75rem;\n  min-height: var(--min-height);\n  padding: var(--padding-block) var(--padding-inline);\n  border: 2px solid var(--border-color);\n  border-radius: var(--border-radius);\n  background-color: var(--background-color);\n  color: var(--color);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-size: var(--font-size);\n  font-weight: var(--fontWeight-bold, 700);\n  letter-spacing: 0.01em;\n  line-height: 1.1;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  position: relative;\n  transition:\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  @include focus-ring;\n\n  &:hover:not(:disabled, [aria-disabled='true']) {\n    background-color: var(--hover-background-color);\n    border-color: var(--hover-border-color);\n  }\n\n  &:active:not(:disabled, [aria-disabled='true']) {\n    background-color: var(--active-background-color);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    background-color: var(--disabled-background-color);\n    border-color: var(--disabled-border-color);\n    color: var(--disabled-color);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n}\n\n@mixin button-variant(\n  $bg-color,\n  $text-color,\n  $border-color: transparent,\n  $hover-bg: null,\n  $hover-border: null,\n  $active-bg: null\n) {\n  --background-color: #{$bg-color};\n  --color: #{$text-color};\n  --border-color: #{$border-color};\n\n  @if $hover-bg {\n    --hover-background-color: #{$hover-bg};\n  }\n\n  @if $hover-border {\n    --hover-border-color: #{$hover-border};\n  }\n\n  @if $active-bg {\n    --active-background-color: #{$active-bg};\n  }\n}\n\n@mixin button-variant-gradient($gradient, $text-color: #fff, $hover-filter: brightness(0.95)) {\n  --border-color: transparent;\n  --color: #{$text-color};\n\n  background: $gradient;\n\n  &:hover:not(:disabled, [aria-disabled='true']) {\n    filter: $hover-filter;\n  }\n}\n\n@mixin button-variant-outline($border-color, $text-color, $hover-bg: null) {\n  --background-color: var(--ivds-interactive-secondary-bg, #fff);\n  --color: #{$text-color};\n  --border-color: #{$border-color};\n\n  @if $hover-bg {\n    --hover-background-color: #{$hover-bg};\n  }\n}\n\n@mixin button-variant-ghost($text-color, $hover-bg) {\n  --background-color: var(--ivds-interactive-supplementary-bg, #f1f3f5);\n  --border-color: transparent;\n  --color: #{$text-color};\n  --hover-background-color: #{$hover-bg};\n}\n\n@mixin button-variant-glass($text-color: var(--ivds-text-primary)) {\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-strong, #a1adba);\n  --color: #{$text-color};\n}\n\n@mixin button-size($padding-y, $padding-x, $font-size, $min-height: null) {\n  --padding-block: #{$padding-y};\n  --padding-inline: #{$padding-x};\n  --font-size: #{$font-size};\n\n  @if $min-height {\n    --min-height: #{$min-height};\n  }\n}\n\n@mixin button-icon-spacing($gap: var(--spacing-2, 0.5rem)) {\n  gap: $gap;\n\n  .ivds-button__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n}\n\n@mixin button-loading {\n  position: relative;\n  color: transparent !important;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 1rem;\n    height: 1rem;\n    border: 2px solid currentcolor;\n    border-radius: 9999px;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    transform: translate(-50%, -50%);\n    animation: ivds-button-spin 0.7s linear infinite;\n    color: inherit;\n  }\n}\n\n@mixin button-full-width {\n  width: 100%;\n  justify-content: center;\n}\n\n@mixin button-icon-only($size: 48px) {\n  --min-height: #{$size};\n  --padding-block: 0;\n  --padding-inline: 0;\n\n  width: $size;\n  height: $size;\n\n  .ivds-button__icon {\n    margin: 0;\n  }\n\n  &--circular {\n    --border-radius: var(--borderRadius-full, 9999px);\n  }\n}\n\n@mixin button-pill {\n  border-radius: var(--borderRadius-full, 9999px);\n}\n\n","// Button component styles\n/* stylelint-disable no-descending-specificity */\n\n@use 'button-mixin' as btn;\n\n.ivds-button {\n  @include btn.button-base;\n  @include btn.button-icon-spacing;\n\n  &__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1.15em;\n      height: 1.15em;\n      fill: currentcolor;\n    }\n  }\n\n  &__text {\n    flex: 1;\n  }\n\n  &--loading {\n    @include btn.button-loading;\n  }\n\n  &--full-width {\n    @include btn.button-full-width;\n  }\n\n  &--pill {\n    @include btn.button-pill;\n  }\n\n  &--icon-only {\n    @include btn.button-icon-only;\n\n    &.ivds-button--small {\n      @include btn.button-icon-only(40px);\n    }\n\n    &.ivds-button--large {\n      @include btn.button-icon-only(56px);\n    }\n  }\n}\n\n.ivds-button--primary {\n  @include btn.button-variant(\n    var(--ivds-interactive-primary-bg, #1058b8),\n    var(--ivds-interactive-primary-text, #fff),\n    var(--ivds-interactive-primary-bg, #1058b8),\n    var(--ivds-interactive-primary-bg-hover, #0b4593),\n    var(--ivds-interactive-primary-bg-hover, #0b4593),\n    var(--ivds-interactive-primary-bg-active, #083775)\n  );\n}\n\n.ivds-button--secondary {\n  @include btn.button-variant-outline(\n    var(--ivds-interactive-secondary-border, #1058b8),\n    var(--ivds-interactive-secondary-text, #0b4593),\n    var(--ivds-interactive-secondary-bg-hover, #eef4ff)\n  );\n}\n\n.ivds-button--accent {\n  @include btn.button-variant(\n    var(--color-brand-accent-500, #1a6bdb),\n    #fff,\n    var(--color-brand-accent-500, #1a6bdb),\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-600, #1058b8)\n  );\n}\n\n.ivds-button--success {\n  @include btn.button-variant(\n    var(--color-semantic-success-600, #0f6f4a),\n    #fff,\n    var(--color-semantic-success-600, #0f6f4a),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a)\n  );\n}\n\n.ivds-button--warning {\n  @include btn.button-variant(\n    var(--color-semantic-warning-500, #ce790b),\n    #fff,\n    var(--color-semantic-warning-500, #ce790b),\n    var(--color-semantic-warning-600, #a76009),\n    var(--color-semantic-warning-600, #a76009),\n    var(--color-semantic-warning-600, #a76009)\n  );\n}\n\n.ivds-button--danger {\n  @include btn.button-variant(\n    var(--color-semantic-error-500, #d73a50),\n    #fff,\n    var(--color-semantic-error-500, #d73a50),\n    var(--color-semantic-error-600, #b72a41),\n    var(--color-semantic-error-600, #b72a41),\n    var(--color-semantic-error-600, #b72a41)\n  );\n}\n\n.ivds-button--info {\n  @include btn.button-variant(\n    var(--color-semantic-info-600, #0050c8),\n    #fff,\n    var(--color-semantic-info-600, #0050c8),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99)\n  );\n}\n\n.ivds-button--neutral {\n  @include btn.button-variant(\n    var(--color-semantic-neutral-900, #121a24),\n    #fff,\n    var(--color-semantic-neutral-900, #121a24),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36)\n  );\n}\n\n.ivds-button--gradient-primary {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-secondary {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-secondary-500, #007a4d) 0%, var(--color-brand-secondary-700, #004d31) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-mixed {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-brand-accent-600, #1058b8) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-sunset {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-semantic-error-600, #b72a41) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-ocean {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%),\n    #fff\n  );\n}\n\n.ivds-button--outline-primary {\n  @include btn.button-variant-outline(\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-700, #0b4593),\n    var(--color-brand-accent-50, #eef4ff)\n  );\n}\n\n.ivds-button--outline-secondary {\n  @include btn.button-variant-outline(\n    var(--color-brand-secondary-600, #006640),\n    var(--color-brand-secondary-700, #005234),\n    var(--color-brand-secondary-50, #eef8f3)\n  );\n}\n\n.ivds-button--outline-neutral {\n  @include btn.button-variant-outline(\n    var(--color-semantic-neutral-500, #6b7785),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-100, #f1f3f5)\n  );\n}\n\n.ivds-button--ghost-primary {\n  @include btn.button-variant-ghost(\n    var(--color-brand-accent-700, #0b4593),\n    var(--ivds-interactive-supplementary-bg-hover, #e2e7ec)\n  );\n}\n\n.ivds-button--ghost-secondary {\n  @include btn.button-variant-ghost(\n    var(--color-brand-secondary-700, #005234),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n}\n\n.ivds-button--ghost-neutral {\n  @include btn.button-variant-ghost(\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n}\n\n.ivds-button--tertiary,\n.ivds-button--supplementary {\n  @extend .ivds-button--ghost-primary;\n}\n\n.ivds-button--ghost {\n  @extend .ivds-button--ghost-neutral;\n}\n\n.ivds-button--glass {\n  @include btn.button-variant-glass(var(--ivds-text-primary, #121a24));\n}\n\n.ivds-button--glass-dark {\n  @include btn.button-variant(\n    var(--color-semantic-neutral-900, #121a24),\n    #fff,\n    var(--color-semantic-neutral-900, #121a24),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36)\n  );\n}\n\n.ivds-button--xs {\n  @include btn.button-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-xs, 0.75rem), 32px);\n}\n\n.ivds-button--small {\n  @include btn.button-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-sm, 0.875rem), 40px);\n}\n\n.ivds-button--large {\n  @include btn.button-size(var(--spacing-4, 1rem), var(--spacing-8, 2rem), var(--fontSize-lg, 1.125rem), 56px);\n}\n\n.ivds-button--xl {\n  @include btn.button-size(var(--spacing-5, 1.25rem), var(--spacing-10, 2.5rem), var(--fontSize-xl, 1.25rem), 64px);\n}\n\n.ivds-button-group {\n  display: inline-flex;\n\n  > .ivds-button {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-left: -2px;\n    }\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n.ivds-button-group--vertical {\n  flex-direction: column;\n\n  > .ivds-button {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-left: 0;\n      margin-top: -2px;\n    }\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n.ivds-button-group--gap {\n  gap: var(--spacing-2, 0.5rem);\n\n  > .ivds-button {\n    border-radius: var(--ivds-radius-s, 0.125rem);\n    margin: 0;\n  }\n}\n","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/button/button.min.css

@@ -1 +1 @@
-@keyframes ivds-button-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}.ivds-button{align-items:center;border:var(--borderWidth-1,1px) solid transparent;border-radius:var(--borderRadius-md,.375rem);cursor:pointer;display:inline-flex;font-family:var(--fontFamily-sans,system-ui,-apple-system,sans-serif);font-weight:var(--fontWeight-medium,500);justify-content:center;line-height:var(--lineHeight-tight,1.25);text-decoration:none;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ivds-button:focus{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}.ivds-button:disabled,.ivds-button[aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}.ivds-button{font-size:var(--fontSize-base,1rem);gap:var(--spacing-2,.5rem);min-height:44px;padding:var(--spacing-3,.75rem) var(--spacing-6,1.5rem)}.ivds-button .ivds-button__icon,.ivds-button__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.ivds-button__icon svg{fill:currentcolor;height:1em;width:1em}.ivds-button__text{flex:1}.ivds-button--loading{color:transparent!important;position:relative}.ivds-button--loading:after{animation:ivds-button-spin .8s linear infinite;border:2px solid;border-radius:50%;border-top:2px solid transparent;content:"";height:16px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px}.ivds-button--full-width{justify-content:center;width:100%}.ivds-button--icon-only{height:44px;padding:0;width:44px}.ivds-button--icon-only .ivds-button__icon{margin:0}.ivds-button--icon-only.ivds-button--small{height:32px;padding:0;width:32px}.ivds-button--icon-only.ivds-button--small .ivds-button__icon{margin:0}.ivds-button--icon-only.ivds-button--large{height:56px;padding:0;width:56px}.ivds-button--icon-only.ivds-button--large .ivds-button__icon{margin:0}.ivds-button--primary{background-color:var(--color-brand-primary-500,#f97316);border-color:var(--color-brand-primary-500,#f97316);color:var(--color-semantic-neutral-50,#fafafa)}.ivds-button--primary:hover:not(:disabled,[aria-disabled=true]){background-color:var(--color-brand-primary-600,#ea580c);border-color:var(--color-brand-primary-600,#ea580c)}.ivds-button--primary:active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}.ivds-button--secondary{background-color:transparent;border-color:var(--color-brand-primary-500,#f97316);color:var(--color-brand-primary-500,#f97316)}.ivds-button--secondary:hover:not(:disabled,[aria-disabled=true]){background-color:var(--color-brand-primary-50,#fff7ed);border-color:var(--color-brand-primary-500,#f97316)}.ivds-button--secondary:active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}.ivds-button--tertiary{background-color:transparent;border-color:transparent;color:var(--color-brand-primary-500,#f97316)}.ivds-button--tertiary:hover:not(:disabled,[aria-disabled=true]){background-color:var(--color-brand-primary-50,#fff7ed)}.ivds-button--tertiary:active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}.ivds-button--success{background-color:var(--color-semantic-success-500,#10b981);border-color:var(--color-semantic-success-500,#10b981);color:var(--color-semantic-neutral-50,#fcfcfd)}.ivds-button--success:hover:not(:disabled,[aria-disabled=true]){background-color:var(--color-semantic-success-600,#059669);border-color:var(--color-semantic-success-600,#059669)}.ivds-button--success:active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}.ivds-button--warning{background-color:var(--color-semantic-warning-500,#f59e0b);border-color:var(--color-semantic-warning-500,#f59e0b);color:var(--color-semantic-neutral-50,#fcfcfd)}.ivds-button--warning:hover:not(:disabled,[aria-disabled=true]){background-color:var(--color-semantic-warning-600,#d97706);border-color:var(--color-semantic-warning-600,#d97706)}.ivds-button--warning:active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}.ivds-button--danger{background-color:var(--color-semantic-error-500,#ef4444);border-color:var(--color-semantic-error-500,#ef4444);color:var(--color-semantic-neutral-50,#fcfcfd)}.ivds-button--danger:hover:not(:disabled,[aria-disabled=true]){background-color:var(--color-semantic-error-600,#dc2626);border-color:var(--color-semantic-error-600,#dc2626)}.ivds-button--danger:active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}.ivds-button--info{background-color:var(--color-semantic-info-500,#3b82f6);border-color:var(--color-semantic-info-500,#3b82f6);color:var(--color-semantic-neutral-50,#fcfcfd)}.ivds-button--info:hover:not(:disabled,[aria-disabled=true]){background-color:var(--color-semantic-info-600,#2563eb);border-color:var(--color-semantic-info-600,#2563eb)}.ivds-button--info:active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}.ivds-button--small{font-size:var(--fontSize-sm,.875rem);min-height:32px;padding:var(--spacing-2,.5rem) var(--spacing-4,1rem)}.ivds-button--large{font-size:var(--fontSize-lg,1.125rem);min-height:56px;padding:var(--spacing-4,1rem) var(--spacing-8,2rem)}.ivds-button-group{display:inline-flex}.ivds-button-group--vertical{flex-direction:column}
+@keyframes ivds-button-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}.ivds-button{--background-color:transparent;--color:var(--ivds-text-primary,#121a24);--border-color:transparent;--hover-background-color:transparent;--hover-border-color:transparent;--active-background-color:transparent;--disabled-background-color:var(--ivds-surface-muted,#f1f3f5);--disabled-border-color:var(--ivds-border-subtle,#e2e7ec);--disabled-color:var(--ivds-text-muted,#6b7785);--font-size:var(--fontSize-base,1rem);--min-height:48px;--padding-block:var(--spacing-3,0.75rem);--padding-inline:var(--spacing-6,1.5rem);--border-radius:var(--ivds-radius-s,0.125rem);align-items:center;background-color:var(--background-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:inline-flex;font-family:var(--fontFamily-primary,system-ui,sans-serif);font-size:var(--font-size);font-weight:var(--fontWeight-bold,700);justify-content:center;letter-spacing:.01em;line-height:1.1;min-height:var(--min-height);min-width:2.75rem;padding:var(--padding-block) var(--padding-inline);position:relative;text-decoration:none;transition:background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ivds-button:focus-visible{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-button:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-button:hover:not(:disabled,[aria-disabled=true]){background-color:var(--hover-background-color);border-color:var(--hover-border-color)}.ivds-button:active:not(:disabled,[aria-disabled=true]){background-color:var(--active-background-color)}.ivds-button:disabled,.ivds-button[aria-disabled=true]{background-color:var(--disabled-background-color);border-color:var(--disabled-border-color);color:var(--disabled-color);cursor:not-allowed;pointer-events:none}.ivds-button{gap:var(--spacing-2,.5rem)}.ivds-button .ivds-button__icon,.ivds-button__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.ivds-button__icon svg{fill:currentcolor;height:1.15em;width:1.15em}.ivds-button__text{flex:1}.ivds-button--loading{color:transparent!important;pointer-events:none;position:relative}.ivds-button--loading:after{animation:ivds-button-spin .7s linear infinite;border-color:currentcolor transparent transparent currentcolor;border-radius:9999px;border-style:solid;border-width:2px;color:inherit;content:"";height:1rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1rem}.ivds-button--full-width{justify-content:center;width:100%}.ivds-button--pill{border-radius:var(--borderRadius-full,9999px)}.ivds-button--icon-only{--min-height:48px;--padding-block:0;--padding-inline:0;height:48px;width:48px}.ivds-button--icon-only .ivds-button__icon{margin:0}.ivds-button--icon-only--circular{--border-radius:var(--borderRadius-full,9999px)}.ivds-button--icon-only.ivds-button--small{--min-height:40px;--padding-block:0;--padding-inline:0;height:40px;width:40px}.ivds-button--icon-only.ivds-button--small .ivds-button__icon{margin:0}.ivds-button--icon-only.ivds-button--small--circular{--border-radius:var(--borderRadius-full,9999px)}.ivds-button--icon-only.ivds-button--large{--min-height:56px;--padding-block:0;--padding-inline:0;height:56px;width:56px}.ivds-button--icon-only.ivds-button--large .ivds-button__icon{margin:0}.ivds-button--icon-only.ivds-button--large--circular{--border-radius:var(--borderRadius-full,9999px)}.ivds-button--primary{--background-color:var(--ivds-interactive-primary-bg,#1058b8);--color:var(--ivds-interactive-primary-text,#fff);--border-color:var(--ivds-interactive-primary-bg,#1058b8);--hover-background-color:var(--ivds-interactive-primary-bg-hover,#0b4593);--hover-border-color:var(--ivds-interactive-primary-bg-hover,#0b4593);--active-background-color:var(--ivds-interactive-primary-bg-active,#083775)}.ivds-button--secondary{--background-color:var(--ivds-interactive-secondary-bg,#fff);--color:var(--ivds-interactive-secondary-text,#0b4593);--border-color:var(--ivds-interactive-secondary-border,#1058b8);--hover-background-color:var(--ivds-interactive-secondary-bg-hover,#eef4ff)}.ivds-button--accent{--background-color:var(--color-brand-accent-500,#1a6bdb);--color:#fff;--border-color:var(--color-brand-accent-500,#1a6bdb);--hover-background-color:var(--color-brand-accent-600,#1058b8);--hover-border-color:var(--color-brand-accent-600,#1058b8);--active-background-color:var(--color-brand-accent-600,#1058b8)}.ivds-button--success{--background-color:var(--color-semantic-success-600,#0f6f4a);--color:#fff;--border-color:var(--color-semantic-success-600,#0f6f4a);--hover-background-color:var(--color-semantic-success-700,#0a573a);--hover-border-color:var(--color-semantic-success-700,#0a573a);--active-background-color:var(--color-semantic-success-700,#0a573a)}.ivds-button--warning{--background-color:var(--color-semantic-warning-500,#ce790b);--color:#fff;--border-color:var(--color-semantic-warning-500,#ce790b);--hover-background-color:var(--color-semantic-warning-600,#a76009);--hover-border-color:var(--color-semantic-warning-600,#a76009);--active-background-color:var(--color-semantic-warning-600,#a76009)}.ivds-button--danger{--background-color:var(--color-semantic-error-500,#d73a50);--color:#fff;--border-color:var(--color-semantic-error-500,#d73a50);--hover-background-color:var(--color-semantic-error-600,#b72a41);--hover-border-color:var(--color-semantic-error-600,#b72a41);--active-background-color:var(--color-semantic-error-600,#b72a41)}.ivds-button--info{--background-color:var(--color-semantic-info-600,#0050c8);--color:#fff;--border-color:var(--color-semantic-info-600,#0050c8);--hover-background-color:var(--color-semantic-info-700,#003d99);--hover-border-color:var(--color-semantic-info-700,#003d99);--active-background-color:var(--color-semantic-info-700,#003d99)}.ivds-button--neutral{--background-color:var(--color-semantic-neutral-900,#121a24);--color:#fff;--border-color:var(--color-semantic-neutral-900,#121a24);--hover-background-color:var(--color-semantic-neutral-800,#202a36);--hover-border-color:var(--color-semantic-neutral-800,#202a36);--active-background-color:var(--color-semantic-neutral-800,#202a36)}.ivds-button--gradient-primary{--border-color:transparent;--color:#fff;background:linear-gradient(135deg,var(--color-brand-accent-500,#1a6bdb) 0,var(--color-brand-accent-700,#0b4593) 100%)}.ivds-button--gradient-primary:hover:not(:disabled,[aria-disabled=true]){filter:brightness(.95)}.ivds-button--gradient-secondary{--border-color:transparent;--color:#fff;background:linear-gradient(135deg,var(--color-brand-secondary-500,#007a4d) 0,var(--color-brand-secondary-700,#004d31) 100%)}.ivds-button--gradient-secondary:hover:not(:disabled,[aria-disabled=true]){filter:brightness(.95)}.ivds-button--gradient-mixed{--border-color:transparent;--color:#fff;background:linear-gradient(135deg,var(--color-brand-primary-500,#c50) 0,var(--color-brand-accent-600,#1058b8) 100%)}.ivds-button--gradient-mixed:hover:not(:disabled,[aria-disabled=true]){filter:brightness(.95)}.ivds-button--gradient-sunset{--border-color:transparent;--color:#fff;background:linear-gradient(135deg,var(--color-brand-primary-500,#c50) 0,var(--color-semantic-error-600,#b72a41) 100%)}.ivds-button--gradient-sunset:hover:not(:disabled,[aria-disabled=true]){filter:brightness(.95)}.ivds-button--gradient-ocean{--border-color:transparent;--color:#fff;background:linear-gradient(135deg,var(--color-brand-accent-500,#1a6bdb) 0,var(--color-brand-accent-700,#0b4593) 100%)}.ivds-button--gradient-ocean:hover:not(:disabled,[aria-disabled=true]){filter:brightness(.95)}.ivds-button--outline-primary{--background-color:var(--ivds-interactive-secondary-bg,#fff);--color:var(--color-brand-accent-700,#0b4593);--border-color:var(--color-brand-accent-600,#1058b8);--hover-background-color:var(--color-brand-accent-50,#eef4ff)}.ivds-button--outline-secondary{--background-color:var(--ivds-interactive-secondary-bg,#fff);--color:var(--color-brand-secondary-700,#005234);--border-color:var(--color-brand-secondary-600,#006640);--hover-background-color:var(--color-brand-secondary-50,#eef8f3)}.ivds-button--outline-neutral{--background-color:var(--ivds-interactive-secondary-bg,#fff);--color:var(--color-semantic-neutral-800,#202a36);--border-color:var(--color-semantic-neutral-500,#6b7785);--hover-background-color:var(--color-semantic-neutral-100,#f1f3f5)}.ivds-button--ghost-primary,.ivds-button--supplementary,.ivds-button--tertiary{--background-color:var(--ivds-interactive-supplementary-bg,#f1f3f5);--border-color:transparent;--color:var(--color-brand-accent-700,#0b4593);--hover-background-color:var(--ivds-interactive-supplementary-bg-hover,#e2e7ec)}.ivds-button--ghost-secondary{--background-color:var(--ivds-interactive-supplementary-bg,#f1f3f5);--border-color:transparent;--color:var(--color-brand-secondary-700,#005234);--hover-background-color:var(--color-semantic-neutral-200,#e2e7ec)}.ivds-button--ghost,.ivds-button--ghost-neutral{--background-color:var(--ivds-interactive-supplementary-bg,#f1f3f5);--border-color:transparent;--color:var(--color-semantic-neutral-800,#202a36);--hover-background-color:var(--color-semantic-neutral-200,#e2e7ec)}.ivds-button--glass{--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-strong,#a1adba);--color:var(--ivds-text-primary,#121a24)}.ivds-button--glass-dark{--background-color:var(--color-semantic-neutral-900,#121a24);--color:#fff;--border-color:var(--color-semantic-neutral-900,#121a24);--hover-background-color:var(--color-semantic-neutral-800,#202a36);--hover-border-color:var(--color-semantic-neutral-800,#202a36)}.ivds-button--xs{--padding-block:var(--spacing-1,0.25rem);--padding-inline:var(--spacing-3,0.75rem);--font-size:var(--fontSize-xs,0.75rem);--min-height:32px}.ivds-button--small{--padding-block:var(--spacing-2,0.5rem);--padding-inline:var(--spacing-4,1rem);--font-size:var(--fontSize-sm,0.875rem);--min-height:40px}.ivds-button--large{--padding-block:var(--spacing-4,1rem);--padding-inline:var(--spacing-8,2rem);--font-size:var(--fontSize-lg,1.125rem);--min-height:56px}.ivds-button--xl{--padding-block:var(--spacing-5,1.25rem);--padding-inline:var(--spacing-10,2.5rem);--font-size:var(--fontSize-xl,1.25rem);--min-height:64px}.ivds-button-group{display:inline-flex}.ivds-button-group>.ivds-button{border-radius:0}.ivds-button-group>.ivds-button:not(:first-child){margin-left:-2px}.ivds-button-group>.ivds-button:first-child{border-bottom-left-radius:var(--ivds-radius-s,.125rem);border-top-left-radius:var(--ivds-radius-s,.125rem)}.ivds-button-group>.ivds-button:last-child{border-bottom-right-radius:var(--ivds-radius-s,.125rem);border-top-right-radius:var(--ivds-radius-s,.125rem)}.ivds-button-group--vertical{flex-direction:column}.ivds-button-group--vertical>.ivds-button{border-radius:0}.ivds-button-group--vertical>.ivds-button:not(:first-child){margin-left:0;margin-top:-2px}.ivds-button-group--vertical>.ivds-button:first-child{border-top-left-radius:var(--ivds-radius-s,.125rem);border-top-right-radius:var(--ivds-radius-s,.125rem)}.ivds-button-group--vertical>.ivds-button:last-child{border-bottom-left-radius:var(--ivds-radius-s,.125rem);border-bottom-right-radius:var(--ivds-radius-s,.125rem)}.ivds-button-group--gap{gap:var(--spacing-2,.5rem)}.ivds-button-group--gap>.ivds-button{border-radius:var(--ivds-radius-s,.125rem);margin:0}