:root {
  --puikit-typography-color-primary: var(--puikit-color-text-primary);
  --puikit-typography-color-secondary: var(--puikit-color-text-secondary);
  --puikit-typography-color-tertiary: var(--puikit-color-text-tertiary);
  --puikit-typography-color-disabled: var(--puikit-color-text-disabled);
  --puikit-typography-color-brand: var(--puikit-color-brand-400);
  --puikit-typography-color-success: var(--puikit-color-success-400);
  --puikit-typography-color-warning: var(--puikit-color-warning-500);
  --puikit-typography-color-danger: var(--puikit-color-danger-500);
  --puikit-typography-color-info: var(--puikit-color-info-500);
  --puikit-typography-color-inverse: var(--puikit-color-neutral-900);
  --puikit-typography-font-weight-thin: var(--puikit-typography-weight-thin);
  --puikit-typography-font-weight-regular: var(--puikit-typography-weight-regular);
  --puikit-typography-font-weight-medium: var(--puikit-typography-weight-medium);
  --puikit-typography-font-weight-semibold: var(--puikit-typography-weight-semibold);
  --puikit-typography-font-weight-bold: var(--puikit-typography-weight-bold);
  --puikit-typography-spacing-tight: var(--puikit-typography-letter-spacing-s);
  --puikit-typography-spacing-normal: var(--puikit-typography-letter-spacing-m);
  --puikit-typography-spacing-wide: var(--puikit-typography-letter-spacing-l);
}
.pui-typography {
  align-items: center;
  display: inline-flex;
  font-family: var(--puikit-font-family-sans), sans-serif;
  margin: 0;
}
.pui-typography--weight-thin {
  font-weight: var(--puikit-typography-font-weight-thin);
}
.pui-typography--weight-regular {
  font-weight: var(--puikit-typography-font-weight-regular);
}
.pui-typography--weight-medium {
  font-weight: var(--puikit-typography-font-weight-medium);
}
.pui-typography--weight-semibold {
  font-weight: var(--puikit-typography-font-weight-semibold);
}
.pui-typography--weight-bold {
  font-weight: var(--puikit-typography-font-weight-bold);
}
.pui-typography--align-left {
  display: inline-block;
  text-align: start;
  width: 100%;
}
.pui-typography--align-center {
  display: inline-block;
  text-align: center;
  width: 100%;
}
.pui-typography--align-right {
  display: inline-block;
  text-align: end;
  width: 100%;
}
.pui-typography--transform-uppercase {
  text-transform: uppercase;
}
.pui-typography--transform-lowercase {
  text-transform: lowercase;
}
.pui-typography--transform-capitalize {
  text-transform: capitalize;
}
.pui-typography--transform-none {
  text-transform: none;
}
.pui-typography--whitespace-normal {
  white-space: normal;
}
.pui-typography--whitespace-nowrap {
  white-space: nowrap;
}
.pui-typography--whitespace-pre {
  white-space: pre;
}
.pui-typography--whitespace-pre-wrap {
  white-space: pre-wrap;
}
.pui-typography--whitespace-pre-line {
  white-space: pre-line;
}
.pui-typography--whitespace-break-spaces {
  white-space: break-spaces;
}
.pui-typography--select-auto {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}
.pui-typography--select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pui-typography--select-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.pui-typography--select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all;
}
.pui-typography--select-contain {
  user-select: contain;
}
.pui-typography--truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pui-typography--truncate-multi {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pui-truncate-lines);
}
.pui-typography--italic {
  font-style: italic;
}
.pui-typography--underline {
  text-decoration: underline;
}
.pui-typography--color-primary {
  color: var(--puikit-typography-color-primary);
}
.pui-typography--color-secondary {
  color: var(--puikit-typography-color-secondary);
}
.pui-typography--color-tertiary {
  color: var(--puikit-typography-color-tertiary);
}
.pui-typography--color-disabled {
  color: var(--puikit-typography-color-disabled);
}
.pui-typography--color-success {
  color: var(--puikit-typography-color-success);
}
.pui-typography--color-warning {
  color: var(--puikit-typography-color-warning);
}
.pui-typography--color-danger {
  color: var(--puikit-typography-color-danger);
}
.pui-typography--color-info {
  color: var(--puikit-typography-color-info);
}
.pui-typography--color-brand {
  color: var(--puikit-typography-color-brand);
}
.pui-typography--color-inverse {
  color: var(--puikit-typography-color-inverse);
}
.pui-typography--color-inherit {
  color: inherit;
}
.pui-typography--letter-spacing-tight {
  letter-spacing: var(--puikit-typography-spacing-tight);
}
.pui-typography--letter-spacing-normal {
  letter-spacing: var(--puikit-typography-spacing-normal);
}
.pui-typography--letter-spacing-wide {
  letter-spacing: var(--puikit-typography-spacing-wide);
}
:root {
  --puikit-text-font-family: var(--puikit-font-family-sans);
  --puikit-text-font-size-xs: var(--puikit-typography-size-1);
  --puikit-text-font-size-s: var(--puikit-typography-size-2);
  --puikit-text-font-size-m: var(--puikit-typography-size-3);
  --puikit-text-font-size-l: var(--puikit-typography-size-4);
  --puikit-text-font-size-xl: var(--puikit-typography-size-5);
  --puikit-text-line-height-xs: var(--puikit-typography-line-height-1);
  --puikit-text-line-height-s: var(--puikit-typography-line-height-2);
  --puikit-text-line-height-m: var(--puikit-typography-line-height-3);
  --puikit-text-line-height-l: var(--puikit-typography-line-height-4);
  --puikit-text-line-height-xl: var(--puikit-typography-line-height-5);
}
.pui-text {
  font-family: var(--puikit-text-font-family), sans-serif;
}
.pui-text--xl {
  font-size: var(--puikit-text-font-size-xl);
  line-height: var(--puikit-text-line-height-xl);
}
.pui-text--l {
  font-size: var(--puikit-text-font-size-l);
  line-height: var(--puikit-text-line-height-l);
}
.pui-text--m {
  font-size: var(--puikit-text-font-size-m);
  line-height: var(--puikit-text-line-height-m);
}
.pui-text--s {
  font-size: var(--puikit-text-font-size-s);
  line-height: var(--puikit-text-line-height-s);
}
.pui-text--xs {
  font-size: var(--puikit-text-font-size-xs);
  line-height: var(--puikit-text-line-height-xs);
}
.pui-spinner__track {
  --pui-spinner-thickness: 12.5%;
  animation: pui-spinner-rotate 1s linear infinite;
  background: conic-gradient(from 270deg, transparent 0deg, currentColor 270deg);
  border-radius: 50%;
  display: block;
  height: 100%;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--pui-spinner-thickness) - 0.5px),
    #000 calc(100% - var(--pui-spinner-thickness) + 0.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--pui-spinner-thickness) - 0.5px),
    #000 calc(100% - var(--pui-spinner-thickness) + 0.5px)
  );
  width: 100%;
}
@keyframes pui-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
:root {
  --puikit-button-size-xs: var(--puikit-action-size-2);
  --puikit-button-size-s: var(--puikit-action-size-4);
  --puikit-button-size-m: var(--puikit-action-size-5);
  --puikit-button-size-l: var(--puikit-action-size-6);
  --puikit-button-size-xl: var(--puikit-action-size-7);
  --puikit-button-padding-xs: var(--puikit-padding-3);
  --puikit-button-padding-s: var(--puikit-padding-4);
  --puikit-button-padding-m: var(--puikit-spacing-3);
  --puikit-button-padding-l: var(--puikit-spacing-4);
  --puikit-button-padding-xl: var(--puikit-spacing-5);
  --puikit-button-gap: var(--puikit-spacing-2);
  --puikit-button-border-radius-xs: var(--puikit-border-radius-2);
  --puikit-button-border-radius-s: var(--puikit-border-radius-2);
  --puikit-button-border-radius-m: var(--puikit-border-radius-2);
  --puikit-button-border-radius-l: var(--puikit-border-radius-3);
  --puikit-button-border-radius-xl: var(--puikit-border-radius-3);
  --puikit-button-font-weight: var(--puikit-typography-weight-semibold);
  --puikit-button-focus-shadow-inner: var(--puikit-color-neutral-900);
  --puikit-button-focus-shadow-outer: var(--puikit-color-brand-500);
  --puikit-button-primary-text-color-success: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-success-hover: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-success-pressed: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-warning: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-warning-hover: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-warning-pressed: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-danger: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-danger-hover: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-danger-pressed: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-info: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-info-hover: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-info-pressed: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-primary: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-primary-hover: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-primary-pressed: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-secondary: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-secondary-hover: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-secondary-pressed: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-neutral: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-neutral-hover: var(--puikit-color-text-primary);
  --puikit-button-primary-text-color-neutral-pressed: var(--puikit-color-text-primary);
  --puikit-button-primary-bg-success: var(--puikit-color-brand-500);
  --puikit-button-primary-bg-success-hover: var(--puikit-color-brand-400);
  --puikit-button-primary-bg-success-pressed: var(--puikit-color-brand-600);
  --puikit-button-primary-bg-warning: var(--puikit-color-warning-500);
  --puikit-button-primary-bg-warning-hover: var(--puikit-color-warning-400);
  --puikit-button-primary-bg-warning-pressed: var(--puikit-color-warning-600);
  --puikit-button-primary-bg-danger: var(--puikit-color-danger-500);
  --puikit-button-primary-bg-danger-hover: var(--puikit-color-danger-400);
  --puikit-button-primary-bg-danger-pressed: var(--puikit-color-danger-600);
  --puikit-button-primary-bg-info: var(--puikit-color-info-500);
  --puikit-button-primary-bg-info-hover: var(--puikit-color-info-400);
  --puikit-button-primary-bg-info-pressed: var(--puikit-color-info-600);
  --puikit-button-primary-bg-primary: var(--puikit-color-brand-500);
  --puikit-button-primary-bg-primary-hover: var(--puikit-color-brand-400);
  --puikit-button-primary-bg-primary-pressed: var(--puikit-color-brand-600);
  --puikit-button-primary-bg-secondary: var(--puikit-color-secondary-500);
  --puikit-button-primary-bg-secondary-hover: var(--puikit-color-secondary-400);
  --puikit-button-primary-bg-secondary-pressed: var(--puikit-color-secondary-600);
  --puikit-button-primary-bg-neutral: var(--puikit-color-neutral-500);
  --puikit-button-primary-bg-neutral-hover: var(--puikit-color-neutral-400);
  --puikit-button-primary-bg-neutral-pressed: var(--puikit-color-neutral-600);
  --puikit-button-ghost-bg-success: color-mix(in srgb, var(--puikit-color-success-500) 13%, transparent);
  --puikit-button-ghost-bg-success-hover: color-mix(in srgb, var(--puikit-color-success-500) 25%, transparent);
  --puikit-button-ghost-bg-success-pressed: color-mix(in srgb, var(--puikit-color-success-500) 7%, transparent);
  --puikit-button-ghost-bg-warning: color-mix(in srgb, var(--puikit-color-warning-500) 13%, transparent);
  --puikit-button-ghost-bg-warning-hover: color-mix(in srgb, var(--puikit-color-warning-500) 25%, transparent);
  --puikit-button-ghost-bg-warning-pressed: color-mix(in srgb, var(--puikit-color-warning-500) 7%, transparent);
  --puikit-button-ghost-bg-danger: color-mix(in srgb, var(--puikit-color-danger-500) 13%, transparent);
  --puikit-button-ghost-bg-danger-hover: color-mix(in srgb, var(--puikit-color-danger-500) 25%, transparent);
  --puikit-button-ghost-bg-danger-pressed: color-mix(in srgb, var(--puikit-color-danger-500) 7%, transparent);
  --puikit-button-ghost-bg-info: color-mix(in srgb, var(--puikit-color-info-500) 13%, transparent);
  --puikit-button-ghost-bg-info-hover: color-mix(in srgb, var(--puikit-color-info-500) 25%, transparent);
  --puikit-button-ghost-bg-info-pressed: color-mix(in srgb, var(--puikit-color-info-500) 7%, transparent);
  --puikit-button-ghost-bg-primary: color-mix(in srgb, var(--puikit-color-brand-500) 13%, transparent);
  --puikit-button-ghost-bg-primary-hover: color-mix(in srgb, var(--puikit-color-brand-500) 25%, transparent);
  --puikit-button-ghost-bg-primary-pressed: color-mix(in srgb, var(--puikit-color-brand-500) 7%, transparent);
  --puikit-button-ghost-bg-secondary: color-mix(in srgb, var(--puikit-color-secondary-500) 13%, transparent);
  --puikit-button-ghost-bg-secondary-hover: color-mix(in srgb, var(--puikit-color-secondary-500) 25%, transparent);
  --puikit-button-ghost-bg-secondary-pressed: color-mix(in srgb, var(--puikit-color-secondary-500) 7%, transparent);
  --puikit-button-ghost-bg-neutral: color-mix(in srgb, var(--puikit-color-neutral-400) 13%, transparent);
  --puikit-button-ghost-bg-neutral-hover: color-mix(in srgb, var(--puikit-color-neutral-400) 25%, transparent);
  --puikit-button-ghost-bg-neutral-pressed: color-mix(in srgb, var(--puikit-color-neutral-400) 7%, transparent);
  --puikit-button-ghost-text-color-success: var(--puikit-color-success-400);
  --puikit-button-ghost-text-color-success-hover: var(--puikit-color-success-400);
  --puikit-button-ghost-text-color-success-pressed: var(--puikit-color-success-400);
  --puikit-button-ghost-text-color-warning: var(--puikit-color-warning-500);
  --puikit-button-ghost-text-color-warning-hover: var(--puikit-color-warning-400);
  --puikit-button-ghost-text-color-warning-pressed: var(--puikit-color-warning-500);
  --puikit-button-ghost-text-color-danger: var(--puikit-color-danger-500);
  --puikit-button-ghost-text-color-danger-hover: var(--puikit-color-danger-400);
  --puikit-button-ghost-text-color-danger-pressed: var(--puikit-color-danger-500);
  --puikit-button-ghost-text-color-info: var(--puikit-color-info-500);
  --puikit-button-ghost-text-color-info-hover: var(--puikit-color-info-400);
  --puikit-button-ghost-text-color-info-pressed: var(--puikit-color-info-500);
  --puikit-button-ghost-text-color-primary: var(--puikit-color-brand-400);
  --puikit-button-ghost-text-color-primary-hover: var(--puikit-color-brand-400);
  --puikit-button-ghost-text-color-primary-pressed: var(--puikit-color-brand-400);
  --puikit-button-ghost-text-color-secondary: var(--puikit-color-secondary-500);
  --puikit-button-ghost-text-color-secondary-hover: var(--puikit-color-secondary-400);
  --puikit-button-ghost-text-color-secondary-pressed: var(--puikit-color-secondary-500);
  --puikit-button-ghost-text-color-neutral: var(--puikit-color-neutral-300);
  --puikit-button-ghost-text-color-neutral-hover: var(--puikit-color-text-primary);
  --puikit-button-ghost-text-color-neutral-pressed: var(--puikit-color-neutral-400);
  --puikit-button-secondary-bg-success: transparent;
  --puikit-button-secondary-bg-success-hover: color-mix(in srgb, var(--puikit-color-success-500) 10%, transparent);
  --puikit-button-secondary-bg-success-pressed: color-mix(in srgb, var(--puikit-color-success-500) 10%, transparent);
  --puikit-button-secondary-bg-warning: transparent;
  --puikit-button-secondary-bg-warning-hover: color-mix(in srgb, var(--puikit-color-warning-500) 10%, transparent);
  --puikit-button-secondary-bg-warning-pressed: color-mix(in srgb, var(--puikit-color-warning-500) 10%, transparent);
  --puikit-button-secondary-bg-danger: transparent;
  --puikit-button-secondary-bg-danger-hover: color-mix(in srgb, var(--puikit-color-danger-500) 10%, transparent);
  --puikit-button-secondary-bg-danger-pressed: color-mix(in srgb, var(--puikit-color-danger-500) 10%, transparent);
  --puikit-button-secondary-bg-info: transparent;
  --puikit-button-secondary-bg-info-hover: color-mix(in srgb, var(--puikit-color-info-500) 10%, transparent);
  --puikit-button-secondary-bg-info-pressed: color-mix(in srgb, var(--puikit-color-info-500) 10%, transparent);
  --puikit-button-secondary-bg-primary: transparent;
  --puikit-button-secondary-bg-primary-hover: color-mix(in srgb, var(--puikit-color-brand-500) 10%, transparent);
  --puikit-button-secondary-bg-primary-pressed: color-mix(in srgb, var(--puikit-color-brand-500) 10%, transparent);
  --puikit-button-secondary-bg-secondary: transparent;
  --puikit-button-secondary-bg-secondary-hover: color-mix(in srgb, var(--puikit-color-secondary-500) 10%, transparent);
  --puikit-button-secondary-bg-secondary-pressed: color-mix(
    in srgb,
    var(--puikit-color-secondary-500) 10%,
    transparent
  );
  --puikit-button-secondary-bg-neutral: transparent;
  --puikit-button-secondary-bg-neutral-hover: color-mix(in srgb, var(--puikit-color-neutral-500) 10%, transparent);
  --puikit-button-secondary-bg-neutral-pressed: color-mix(in srgb, var(--puikit-color-neutral-500) 10%, transparent);
  --puikit-button-secondary-color-success: var(--puikit-color-success-400);
  --puikit-button-secondary-color-success-hover: var(--puikit-color-success-300);
  --puikit-button-secondary-color-success-pressed: var(--puikit-color-success-500);
  --puikit-button-secondary-color-warning: var(--puikit-color-warning-500);
  --puikit-button-secondary-color-warning-hover: var(--puikit-color-warning-400);
  --puikit-button-secondary-color-warning-pressed: var(--puikit-color-warning-500);
  --puikit-button-secondary-color-danger: var(--puikit-color-danger-500);
  --puikit-button-secondary-color-danger-hover: var(--puikit-color-danger-400);
  --puikit-button-secondary-color-danger-pressed: var(--puikit-color-danger-500);
  --puikit-button-secondary-color-info: var(--puikit-color-info-500);
  --puikit-button-secondary-color-info-hover: var(--puikit-color-info-400);
  --puikit-button-secondary-color-info-pressed: var(--puikit-color-info-500);
  --puikit-button-secondary-color-primary: var(--puikit-color-brand-400);
  --puikit-button-secondary-color-primary-hover: var(--puikit-color-brand-300);
  --puikit-button-secondary-color-primary-pressed: var(--puikit-color-brand-500);
  --puikit-button-secondary-color-secondary: var(--puikit-color-secondary-500);
  --puikit-button-secondary-color-secondary-hover: var(--puikit-color-secondary-400);
  --puikit-button-secondary-color-secondary-pressed: var(--puikit-color-secondary-500);
  --puikit-button-secondary-color-neutral: var(--puikit-color-neutral-300);
  --puikit-button-secondary-color-neutral-hover: var(--puikit-color-text-primary);
  --puikit-button-secondary-color-neutral-pressed: var(--puikit-color-neutral-400);
  --puikit-button-clear-bg: transparent;
  --puikit-button-clear-bg-success-hover: color-mix(in srgb, var(--puikit-color-success-400) 13%, transparent);
  --puikit-button-clear-bg-success-pressed: color-mix(in srgb, var(--puikit-color-success-500) 13%, transparent);
  --puikit-button-clear-bg-warning-hover: color-mix(in srgb, var(--puikit-color-warning-500) 13%, transparent);
  --puikit-button-clear-bg-warning-pressed: color-mix(in srgb, var(--puikit-color-warning-500) 13%, transparent);
  --puikit-button-clear-bg-danger-hover: color-mix(in srgb, var(--puikit-color-danger-500) 13%, transparent);
  --puikit-button-clear-bg-danger-pressed: color-mix(in srgb, var(--puikit-color-danger-500) 13%, transparent);
  --puikit-button-clear-bg-info-hover: color-mix(in srgb, var(--puikit-color-info-500) 13%, transparent);
  --puikit-button-clear-bg-info-pressed: color-mix(in srgb, var(--puikit-color-info-500) 13%, transparent);
  --puikit-button-clear-bg-primary-hover: color-mix(in srgb, var(--puikit-color-brand-400) 13%, transparent);
  --puikit-button-clear-bg-primary-pressed: color-mix(in srgb, var(--puikit-color-brand-500) 13%, transparent);
  --puikit-button-clear-bg-secondary-hover: color-mix(in srgb, var(--puikit-color-secondary-500) 13%, transparent);
  --puikit-button-clear-bg-secondary-pressed: color-mix(in srgb, var(--puikit-color-secondary-500) 13%, transparent);
  --puikit-button-clear-bg-neutral-hover: color-mix(in srgb, var(--puikit-color-neutral-500) 13%, transparent);
  --puikit-button-clear-bg-neutral-pressed: color-mix(in srgb, var(--puikit-color-neutral-500) 13%, transparent);
  --puikit-button-clear-text-color-success: var(--puikit-color-success-400);
  --puikit-button-clear-text-color-success-hover: var(--puikit-color-success-400);
  --puikit-button-clear-text-color-success-pressed: var(--puikit-color-success-400);
  --puikit-button-clear-text-color-warning: var(--puikit-color-warning-500);
  --puikit-button-clear-text-color-warning-hover: var(--puikit-color-warning-400);
  --puikit-button-clear-text-color-warning-pressed: var(--puikit-color-warning-500);
  --puikit-button-clear-text-color-danger: var(--puikit-color-danger-500);
  --puikit-button-clear-text-color-danger-hover: var(--puikit-color-danger-400);
  --puikit-button-clear-text-color-danger-pressed: var(--puikit-color-danger-500);
  --puikit-button-clear-text-color-info: var(--puikit-color-info-500);
  --puikit-button-clear-text-color-info-hover: var(--puikit-color-info-400);
  --puikit-button-clear-text-color-info-pressed: var(--puikit-color-info-500);
  --puikit-button-clear-text-color-primary: var(--puikit-color-brand-400);
  --puikit-button-clear-text-color-primary-hover: var(--puikit-color-brand-400);
  --puikit-button-clear-text-color-primary-pressed: var(--puikit-color-brand-400);
  --puikit-button-clear-text-color-secondary: var(--puikit-color-secondary-500);
  --puikit-button-clear-text-color-secondary-hover: var(--puikit-color-secondary-400);
  --puikit-button-clear-text-color-secondary-pressed: var(--puikit-color-secondary-500);
  --puikit-button-clear-text-color-neutral: var(--puikit-color-neutral-300);
  --puikit-button-clear-text-color-neutral-hover: var(--puikit-color-text-primary);
  --puikit-button-clear-text-color-neutral-pressed: var(--puikit-color-neutral-400);
}
.pui-button {
  align-items: center;
  border: none;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--puikit-font-family-sans), sans-serif;
  font-weight: var(--puikit-button-font-weight);
  gap: var(--puikit-button-gap);
  justify-content: center;
  outline: none;
  position: relative;
  text-decoration: none;
  transition: all var(--puikit-transition-fast);
  white-space: nowrap;
}
.pui-button:focus-visible {
  box-shadow: 0 0 0 2px var(--puikit-button-focus-shadow-inner), 0 0 0 4px var(--puikit-button-focus-shadow-outer);
}
.pui-button:disabled:not(.pui-button--loading) {
  cursor: not-allowed;
  opacity: var(--puikit-opacity-disabled);
}
.pui-button--xs {
  border-radius: var(--puikit-button-border-radius-xs);
  height: var(--puikit-button-size-xs);
  padding: 0 var(--puikit-button-padding-xs);
}
.pui-button--s {
  border-radius: var(--puikit-button-border-radius-s);
  height: var(--puikit-button-size-s);
  padding: 0 var(--puikit-button-padding-s);
}
.pui-button--m {
  border-radius: var(--puikit-button-border-radius-m);
  height: var(--puikit-button-size-m);
  padding: 0 var(--puikit-button-padding-m);
}
.pui-button--l {
  border-radius: var(--puikit-button-border-radius-l);
  height: var(--puikit-button-size-l);
  padding: 0 var(--puikit-button-padding-l);
}
.pui-button--xl {
  border-radius: var(--puikit-button-border-radius-xl);
  height: var(--puikit-button-size-xl);
  padding: 0 var(--puikit-button-padding-xl);
}
.pui-button--icon-only.pui-button--xs {
  min-width: var(--puikit-button-size-xs);
  padding: 0;
  width: var(--puikit-button-size-xs);
}
.pui-button--icon-only.pui-button--s {
  min-width: var(--puikit-button-size-s);
  padding: 0;
  width: var(--puikit-button-size-s);
}
.pui-button--icon-only.pui-button--m {
  min-width: var(--puikit-button-size-m);
  padding: 0;
  width: var(--puikit-button-size-m);
}
.pui-button--icon-only.pui-button--l {
  min-width: var(--puikit-button-size-l);
  padding: 0;
  width: var(--puikit-button-size-l);
}
.pui-button--icon-only.pui-button--xl {
  min-width: var(--puikit-button-size-xl);
  padding: 0;
  width: var(--puikit-button-size-xl);
}
.pui-button--block {
  width: 100%;
}
.pui-button--primary.pui-button--color-success {
  background-color: var(--puikit-button-primary-bg-success);
  color: var(--puikit-button-primary-text-color-success);
  --puikit-icon-color: var(--puikit-button-primary-text-color-success);
}
@media (hover: hover) {
  .pui-button--primary.pui-button--color-success:hover:not(:disabled) {
    background-color: var(--puikit-button-primary-bg-success-hover);
    color: var(--puikit-button-primary-text-color-success-hover);
    --puikit-icon-color: var(--puikit-button-primary-text-color-success-hover);
  }
}
.pui-button--primary.pui-button--color-success:active:not(:disabled) {
  background-color: var(--puikit-button-primary-bg-success-pressed);
  color: var(--puikit-button-primary-text-color-success-pressed);
  --puikit-icon-color: var(--puikit-button-primary-text-color-success-pressed);
}
.pui-button--primary.pui-button--color-warning {
  background-color: var(--puikit-button-primary-bg-warning);
  color: var(--puikit-button-primary-text-color-warning);
  --puikit-icon-color: var(--puikit-button-primary-text-color-warning);
}
@media (hover: hover) {
  .pui-button--primary.pui-button--color-warning:hover:not(:disabled) {
    background-color: var(--puikit-button-primary-bg-warning-hover);
    color: var(--puikit-button-primary-text-color-warning-hover);
    --puikit-icon-color: var(--puikit-button-primary-text-color-warning-hover);
  }
}
.pui-button--primary.pui-button--color-warning:active:not(:disabled) {
  background-color: var(--puikit-button-primary-bg-warning-pressed);
  color: var(--puikit-button-primary-text-color-warning-pressed);
  --puikit-icon-color: var(--puikit-button-primary-text-color-warning-pressed);
}
.pui-button--primary.pui-button--color-danger {
  background-color: var(--puikit-button-primary-bg-danger);
  color: var(--puikit-button-primary-text-color-danger);
  --puikit-icon-color: var(--puikit-button-primary-text-color-danger);
}
@media (hover: hover) {
  .pui-button--primary.pui-button--color-danger:hover:not(:disabled) {
    background-color: var(--puikit-button-primary-bg-danger-hover);
    color: var(--puikit-button-primary-text-color-danger-hover);
    --puikit-icon-color: var(--puikit-button-primary-text-color-danger-hover);
  }
}
.pui-button--primary.pui-button--color-danger:active:not(:disabled) {
  background-color: var(--puikit-button-primary-bg-danger-pressed);
  color: var(--puikit-button-primary-text-color-danger-pressed);
  --puikit-icon-color: var(--puikit-button-primary-text-color-danger-pressed);
}
.pui-button--primary.pui-button--color-info {
  background-color: var(--puikit-button-primary-bg-info);
  color: var(--puikit-button-primary-text-color-info);
  --puikit-icon-color: var(--puikit-button-primary-text-color-info);
}
@media (hover: hover) {
  .pui-button--primary.pui-button--color-info:hover:not(:disabled) {
    background-color: var(--puikit-button-primary-bg-info-hover);
    color: var(--puikit-button-primary-text-color-info-hover);
    --puikit-icon-color: var(--puikit-button-primary-text-color-info-hover);
  }
}
.pui-button--primary.pui-button--color-info:active:not(:disabled) {
  background-color: var(--puikit-button-primary-bg-info-pressed);
  color: var(--puikit-button-primary-text-color-info-pressed);
  --puikit-icon-color: var(--puikit-button-primary-text-color-info-pressed);
}
.pui-button--primary.pui-button--color-primary {
  background-color: var(--puikit-button-primary-bg-primary);
  color: var(--puikit-button-primary-text-color-primary);
  --puikit-icon-color: var(--puikit-button-primary-text-color-primary);
}
@media (hover: hover) {
  .pui-button--primary.pui-button--color-primary:hover:not(:disabled) {
    background-color: var(--puikit-button-primary-bg-primary-hover);
    color: var(--puikit-button-primary-text-color-primary-hover);
    --puikit-icon-color: var(--puikit-button-primary-text-color-primary-hover);
  }
}
.pui-button--primary.pui-button--color-primary:active:not(:disabled) {
  background-color: var(--puikit-button-primary-bg-primary-pressed);
  color: var(--puikit-button-primary-text-color-primary-pressed);
  --puikit-icon-color: var(--puikit-button-primary-text-color-primary-pressed);
}
.pui-button--primary.pui-button--color-secondary {
  background-color: var(--puikit-button-primary-bg-secondary);
  color: var(--puikit-button-primary-text-color-secondary);
  --puikit-icon-color: var(--puikit-button-primary-text-color-secondary);
}
@media (hover: hover) {
  .pui-button--primary.pui-button--color-secondary:hover:not(:disabled) {
    background-color: var(--puikit-button-primary-bg-secondary-hover);
    color: var(--puikit-button-primary-text-color-secondary-hover);
    --puikit-icon-color: var(--puikit-button-primary-text-color-secondary-hover);
  }
}
.pui-button--primary.pui-button--color-secondary:active:not(:disabled) {
  background-color: var(--puikit-button-primary-bg-secondary-pressed);
  color: var(--puikit-button-primary-text-color-secondary-pressed);
  --puikit-icon-color: var(--puikit-button-primary-text-color-secondary-pressed);
}
.pui-button--primary.pui-button--color-neutral {
  background-color: var(--puikit-button-primary-bg-neutral);
  color: var(--puikit-button-primary-text-color-neutral);
  --puikit-icon-color: var(--puikit-button-primary-text-color-neutral);
}
@media (hover: hover) {
  .pui-button--primary.pui-button--color-neutral:hover:not(:disabled) {
    background-color: var(--puikit-button-primary-bg-neutral-hover);
    color: var(--puikit-button-primary-text-color-neutral-hover);
    --puikit-icon-color: var(--puikit-button-primary-text-color-neutral-hover);
  }
}
.pui-button--primary.pui-button--color-neutral:active:not(:disabled) {
  background-color: var(--puikit-button-primary-bg-neutral-pressed);
  color: var(--puikit-button-primary-text-color-neutral-pressed);
  --puikit-icon-color: var(--puikit-button-primary-text-color-neutral-pressed);
}
.pui-button--ghost.pui-button--color-success {
  background-color: var(--puikit-button-ghost-bg-success);
  color: var(--puikit-button-ghost-text-color-success);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-success);
}
@media (hover: hover) {
  .pui-button--ghost.pui-button--color-success:hover:not(:disabled) {
    background-color: var(--puikit-button-ghost-bg-success-hover);
    color: var(--puikit-button-ghost-text-color-success-hover);
    --puikit-icon-color: var(--puikit-button-ghost-text-color-success-hover);
  }
}
.pui-button--ghost.pui-button--color-success:active:not(:disabled) {
  background-color: var(--puikit-button-ghost-bg-success-pressed);
  color: var(--puikit-button-ghost-text-color-success-pressed);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-success-pressed);
}
.pui-button--ghost.pui-button--color-warning {
  background-color: var(--puikit-button-ghost-bg-warning);
  color: var(--puikit-button-ghost-text-color-warning);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-warning);
}
@media (hover: hover) {
  .pui-button--ghost.pui-button--color-warning:hover:not(:disabled) {
    background-color: var(--puikit-button-ghost-bg-warning-hover);
    color: var(--puikit-button-ghost-text-color-warning-hover);
    --puikit-icon-color: var(--puikit-button-ghost-text-color-warning-hover);
  }
}
.pui-button--ghost.pui-button--color-warning:active:not(:disabled) {
  background-color: var(--puikit-button-ghost-bg-warning-pressed);
  color: var(--puikit-button-ghost-text-color-warning-pressed);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-warning-pressed);
}
.pui-button--ghost.pui-button--color-danger {
  background-color: var(--puikit-button-ghost-bg-danger);
  color: var(--puikit-button-ghost-text-color-danger);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-danger);
}
@media (hover: hover) {
  .pui-button--ghost.pui-button--color-danger:hover:not(:disabled) {
    background-color: var(--puikit-button-ghost-bg-danger-hover);
    color: var(--puikit-button-ghost-text-color-danger-hover);
    --puikit-icon-color: var(--puikit-button-ghost-text-color-danger-hover);
  }
}
.pui-button--ghost.pui-button--color-danger:active:not(:disabled) {
  background-color: var(--puikit-button-ghost-bg-danger-pressed);
  color: var(--puikit-button-ghost-text-color-danger-pressed);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-danger-pressed);
}
.pui-button--ghost.pui-button--color-info {
  background-color: var(--puikit-button-ghost-bg-info);
  color: var(--puikit-button-ghost-text-color-info);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-info);
}
@media (hover: hover) {
  .pui-button--ghost.pui-button--color-info:hover:not(:disabled) {
    background-color: var(--puikit-button-ghost-bg-info-hover);
    color: var(--puikit-button-ghost-text-color-info-hover);
    --puikit-icon-color: var(--puikit-button-ghost-text-color-info-hover);
  }
}
.pui-button--ghost.pui-button--color-info:active:not(:disabled) {
  background-color: var(--puikit-button-ghost-bg-info-pressed);
  color: var(--puikit-button-ghost-text-color-info-pressed);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-info-pressed);
}
.pui-button--ghost.pui-button--color-primary {
  background-color: var(--puikit-button-ghost-bg-primary);
  color: var(--puikit-button-ghost-text-color-primary);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-primary);
}
@media (hover: hover) {
  .pui-button--ghost.pui-button--color-primary:hover:not(:disabled) {
    background-color: var(--puikit-button-ghost-bg-primary-hover);
    color: var(--puikit-button-ghost-text-color-primary-hover);
    --puikit-icon-color: var(--puikit-button-ghost-text-color-primary-hover);
  }
}
.pui-button--ghost.pui-button--color-primary:active:not(:disabled) {
  background-color: var(--puikit-button-ghost-bg-primary-pressed);
  color: var(--puikit-button-ghost-text-color-primary-pressed);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-primary-pressed);
}
.pui-button--ghost.pui-button--color-secondary {
  background-color: var(--puikit-button-ghost-bg-secondary);
  color: var(--puikit-button-ghost-text-color-secondary);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-secondary);
}
@media (hover: hover) {
  .pui-button--ghost.pui-button--color-secondary:hover:not(:disabled) {
    background-color: var(--puikit-button-ghost-bg-secondary-hover);
    color: var(--puikit-button-ghost-text-color-secondary-hover);
    --puikit-icon-color: var(--puikit-button-ghost-text-color-secondary-hover);
  }
}
.pui-button--ghost.pui-button--color-secondary:active:not(:disabled) {
  background-color: var(--puikit-button-ghost-bg-secondary-pressed);
  color: var(--puikit-button-ghost-text-color-secondary-pressed);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-secondary-pressed);
}
.pui-button--ghost.pui-button--color-neutral {
  background-color: var(--puikit-button-ghost-bg-neutral);
  color: var(--puikit-button-ghost-text-color-neutral);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-neutral);
}
@media (hover: hover) {
  .pui-button--ghost.pui-button--color-neutral:hover:not(:disabled) {
    background-color: var(--puikit-button-ghost-bg-neutral-hover);
    color: var(--puikit-button-ghost-text-color-neutral-hover);
    --puikit-icon-color: var(--puikit-button-ghost-text-color-neutral-hover);
  }
}
.pui-button--ghost.pui-button--color-neutral:active:not(:disabled) {
  background-color: var(--puikit-button-ghost-bg-neutral-pressed);
  color: var(--puikit-button-ghost-text-color-neutral-pressed);
  --puikit-icon-color: var(--puikit-button-ghost-text-color-neutral-pressed);
}
.pui-button--secondary {
  border: 1px solid;
}
.pui-button--secondary.pui-button--color-success {
  background-color: var(--puikit-button-secondary-bg-success);
  color: var(--puikit-button-secondary-color-success);
  --puikit-icon-color: var(--puikit-button-secondary-color-success);
}
@media (hover: hover) {
  .pui-button--secondary.pui-button--color-success:hover:not(:disabled) {
    background-color: var(--puikit-button-secondary-bg-success-hover);
    color: var(--puikit-button-secondary-color-success-hover);
    --puikit-icon-color: var(--puikit-button-secondary-color-success-hover);
  }
}
.pui-button--secondary.pui-button--color-success:active:not(:disabled) {
  background-color: var(--puikit-button-secondary-bg-success-pressed);
  color: var(--puikit-button-secondary-color-success-pressed);
  --puikit-icon-color: var(--puikit-button-secondary-color-success-pressed);
}
.pui-button--secondary.pui-button--color-warning {
  background-color: var(--puikit-button-secondary-bg-warning);
  color: var(--puikit-button-secondary-color-warning);
  --puikit-icon-color: var(--puikit-button-secondary-color-warning);
}
@media (hover: hover) {
  .pui-button--secondary.pui-button--color-warning:hover:not(:disabled) {
    background-color: var(--puikit-button-secondary-bg-warning-hover);
    color: var(--puikit-button-secondary-color-warning-hover);
    --puikit-icon-color: var(--puikit-button-secondary-color-warning-hover);
  }
}
.pui-button--secondary.pui-button--color-warning:active:not(:disabled) {
  background-color: var(--puikit-button-secondary-bg-warning-pressed);
  color: var(--puikit-button-secondary-color-warning-pressed);
  --puikit-icon-color: var(--puikit-button-secondary-color-warning-pressed);
}
.pui-button--secondary.pui-button--color-danger {
  background-color: var(--puikit-button-secondary-bg-danger);
  color: var(--puikit-button-secondary-color-danger);
  --puikit-icon-color: var(--puikit-button-secondary-color-danger);
}
@media (hover: hover) {
  .pui-button--secondary.pui-button--color-danger:hover:not(:disabled) {
    background-color: var(--puikit-button-secondary-bg-danger-hover);
    color: var(--puikit-button-secondary-color-danger-hover);
    --puikit-icon-color: var(--puikit-button-secondary-color-danger-hover);
  }
}
.pui-button--secondary.pui-button--color-danger:active:not(:disabled) {
  background-color: var(--puikit-button-secondary-bg-danger-pressed);
  color: var(--puikit-button-secondary-color-danger-pressed);
  --puikit-icon-color: var(--puikit-button-secondary-color-danger-pressed);
}
.pui-button--secondary.pui-button--color-info {
  background-color: var(--puikit-button-secondary-bg-info);
  color: var(--puikit-button-secondary-color-info);
  --puikit-icon-color: var(--puikit-button-secondary-color-info);
}
@media (hover: hover) {
  .pui-button--secondary.pui-button--color-info:hover:not(:disabled) {
    background-color: var(--puikit-button-secondary-bg-info-hover);
    color: var(--puikit-button-secondary-color-info-hover);
    --puikit-icon-color: var(--puikit-button-secondary-color-info-hover);
  }
}
.pui-button--secondary.pui-button--color-info:active:not(:disabled) {
  background-color: var(--puikit-button-secondary-bg-info-pressed);
  color: var(--puikit-button-secondary-color-info-pressed);
  --puikit-icon-color: var(--puikit-button-secondary-color-info-pressed);
}
.pui-button--secondary.pui-button--color-primary {
  background-color: var(--puikit-button-secondary-bg-primary);
  color: var(--puikit-button-secondary-color-primary);
  --puikit-icon-color: var(--puikit-button-secondary-color-primary);
}
@media (hover: hover) {
  .pui-button--secondary.pui-button--color-primary:hover:not(:disabled) {
    background-color: var(--puikit-button-secondary-bg-primary-hover);
    color: var(--puikit-button-secondary-color-primary-hover);
    --puikit-icon-color: var(--puikit-button-secondary-color-primary-hover);
  }
}
.pui-button--secondary.pui-button--color-primary:active:not(:disabled) {
  background-color: var(--puikit-button-secondary-bg-primary-pressed);
  color: var(--puikit-button-secondary-color-primary-pressed);
  --puikit-icon-color: var(--puikit-button-secondary-color-primary-pressed);
}
.pui-button--secondary.pui-button--color-secondary {
  background-color: var(--puikit-button-secondary-bg-secondary);
  color: var(--puikit-button-secondary-color-secondary);
  --puikit-icon-color: var(--puikit-button-secondary-color-secondary);
}
@media (hover: hover) {
  .pui-button--secondary.pui-button--color-secondary:hover:not(:disabled) {
    background-color: var(--puikit-button-secondary-bg-secondary-hover);
    color: var(--puikit-button-secondary-color-secondary-hover);
    --puikit-icon-color: var(--puikit-button-secondary-color-secondary-hover);
  }
}
.pui-button--secondary.pui-button--color-secondary:active:not(:disabled) {
  background-color: var(--puikit-button-secondary-bg-secondary-pressed);
  color: var(--puikit-button-secondary-color-secondary-pressed);
  --puikit-icon-color: var(--puikit-button-secondary-color-secondary-pressed);
}
.pui-button--secondary.pui-button--color-neutral {
  background-color: var(--puikit-button-secondary-bg-neutral);
  color: var(--puikit-button-secondary-color-neutral);
  --puikit-icon-color: var(--puikit-button-secondary-color-neutral);
}
@media (hover: hover) {
  .pui-button--secondary.pui-button--color-neutral:hover:not(:disabled) {
    background-color: var(--puikit-button-secondary-bg-neutral-hover);
    color: var(--puikit-button-secondary-color-neutral-hover);
    --puikit-icon-color: var(--puikit-button-secondary-color-neutral-hover);
  }
}
.pui-button--secondary.pui-button--color-neutral:active:not(:disabled) {
  background-color: var(--puikit-button-secondary-bg-neutral-pressed);
  color: var(--puikit-button-secondary-color-neutral-pressed);
  --puikit-icon-color: var(--puikit-button-secondary-color-neutral-pressed);
}
.pui-button--clear.pui-button--color-success {
  background-color: var(--puikit-button-clear-bg);
  color: var(--puikit-button-clear-text-color-success);
  --puikit-icon-color: var(--puikit-button-clear-text-color-success);
}
@media (hover: hover) {
  .pui-button--clear.pui-button--color-success:hover:not(:disabled) {
    background-color: var(--puikit-button-clear-bg-success-hover);
    color: var(--puikit-button-clear-text-color-success-hover);
    --puikit-icon-color: var(--puikit-button-clear-text-color-success-hover);
  }
}
.pui-button--clear.pui-button--color-success:active:not(:disabled) {
  background-color: var(--puikit-button-clear-bg-success-pressed);
  color: var(--puikit-button-clear-text-color-success-pressed);
  --puikit-icon-color: var(--puikit-button-clear-text-color-success-pressed);
}
.pui-button--clear.pui-button--color-warning {
  background-color: var(--puikit-button-clear-bg);
  color: var(--puikit-button-clear-text-color-warning);
  --puikit-icon-color: var(--puikit-button-clear-text-color-warning);
}
@media (hover: hover) {
  .pui-button--clear.pui-button--color-warning:hover:not(:disabled) {
    background-color: var(--puikit-button-clear-bg-warning-hover);
    color: var(--puikit-button-clear-text-color-warning-hover);
    --puikit-icon-color: var(--puikit-button-clear-text-color-warning-hover);
  }
}
.pui-button--clear.pui-button--color-warning:active:not(:disabled) {
  background-color: var(--puikit-button-clear-bg-warning-pressed);
  color: var(--puikit-button-clear-text-color-warning-pressed);
  --puikit-icon-color: var(--puikit-button-clear-text-color-warning-pressed);
}
.pui-button--clear.pui-button--color-danger {
  background-color: var(--puikit-button-clear-bg);
  color: var(--puikit-button-clear-text-color-danger);
  --puikit-icon-color: var(--puikit-button-clear-text-color-danger);
}
@media (hover: hover) {
  .pui-button--clear.pui-button--color-danger:hover:not(:disabled) {
    background-color: var(--puikit-button-clear-bg-danger-hover);
    color: var(--puikit-button-clear-text-color-danger-hover);
    --puikit-icon-color: var(--puikit-button-clear-text-color-danger-hover);
  }
}
.pui-button--clear.pui-button--color-danger:active:not(:disabled) {
  background-color: var(--puikit-button-clear-bg-danger-pressed);
  color: var(--puikit-button-clear-text-color-danger-pressed);
  --puikit-icon-color: var(--puikit-button-clear-text-color-danger-pressed);
}
.pui-button--clear.pui-button--color-info {
  background-color: var(--puikit-button-clear-bg);
  color: var(--puikit-button-clear-text-color-info);
  --puikit-icon-color: var(--puikit-button-clear-text-color-info);
}
@media (hover: hover) {
  .pui-button--clear.pui-button--color-info:hover:not(:disabled) {
    background-color: var(--puikit-button-clear-bg-info-hover);
    color: var(--puikit-button-clear-text-color-info-hover);
    --puikit-icon-color: var(--puikit-button-clear-text-color-info-hover);
  }
}
.pui-button--clear.pui-button--color-info:active:not(:disabled) {
  background-color: var(--puikit-button-clear-bg-info-pressed);
  color: var(--puikit-button-clear-text-color-info-pressed);
  --puikit-icon-color: var(--puikit-button-clear-text-color-info-pressed);
}
.pui-button--clear.pui-button--color-primary {
  background-color: var(--puikit-button-clear-bg);
  color: var(--puikit-button-clear-text-color-primary);
  --puikit-icon-color: var(--puikit-button-clear-text-color-primary);
}
@media (hover: hover) {
  .pui-button--clear.pui-button--color-primary:hover:not(:disabled) {
    background-color: var(--puikit-button-clear-bg-primary-hover);
    color: var(--puikit-button-clear-text-color-primary-hover);
    --puikit-icon-color: var(--puikit-button-clear-text-color-primary-hover);
  }
}
.pui-button--clear.pui-button--color-primary:active:not(:disabled) {
  background-color: var(--puikit-button-clear-bg-primary-pressed);
  color: var(--puikit-button-clear-text-color-primary-pressed);
  --puikit-icon-color: var(--puikit-button-clear-text-color-primary-pressed);
}
.pui-button--clear.pui-button--color-secondary {
  background-color: var(--puikit-button-clear-bg);
  color: var(--puikit-button-clear-text-color-secondary);
  --puikit-icon-color: var(--puikit-button-clear-text-color-secondary);
}
@media (hover: hover) {
  .pui-button--clear.pui-button--color-secondary:hover:not(:disabled) {
    background-color: var(--puikit-button-clear-bg-secondary-hover);
    color: var(--puikit-button-clear-text-color-secondary-hover);
    --puikit-icon-color: var(--puikit-button-clear-text-color-secondary-hover);
  }
}
.pui-button--clear.pui-button--color-secondary:active:not(:disabled) {
  background-color: var(--puikit-button-clear-bg-secondary-pressed);
  color: var(--puikit-button-clear-text-color-secondary-pressed);
  --puikit-icon-color: var(--puikit-button-clear-text-color-secondary-pressed);
}
.pui-button--clear.pui-button--color-neutral {
  background-color: var(--puikit-button-clear-bg);
  color: var(--puikit-button-clear-text-color-neutral);
  --puikit-icon-color: var(--puikit-button-clear-text-color-neutral);
}
@media (hover: hover) {
  .pui-button--clear.pui-button--color-neutral:hover:not(:disabled) {
    background-color: var(--puikit-button-clear-bg-neutral-hover);
    color: var(--puikit-button-clear-text-color-neutral-hover);
    --puikit-icon-color: var(--puikit-button-clear-text-color-neutral-hover);
  }
}
.pui-button--clear.pui-button--color-neutral:active:not(:disabled) {
  background-color: var(--puikit-button-clear-bg-neutral-pressed);
  color: var(--puikit-button-clear-text-color-neutral-pressed);
  --puikit-icon-color: var(--puikit-button-clear-text-color-neutral-pressed);
}
.pui-button__icon {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}
.pui-button__icon svg {
  height: 100%;
  width: 100%;
}
.pui-button--loading .pui-button__icon,
.pui-button--loading .pui-button__text {
  opacity: 0;
  transition: opacity var(--puikit-transition-fast);
}
.pui-button--loading {
  pointer-events: none;
}
.pui-button__spinner {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
}
.pui-button--truncate {
  max-width: inherit;
}
.pui-button__badge {
  inset-inline-end: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(20%, -20%);
  z-index: 1;
}