@kenreymozo/kenrey-component/dist/esm/components/button.module.css

Components for kendallrey

:root {
  --btn-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  --btn-shadow-hover: rgba(0, 0, 0, 0.24) 0px 0px 0px;
  --btn-shadow-active: rgba(0, 0, 0, 0.24) 0px 0px 0px;
  --btn-transition-duration: 150ms;
  --btn-opacity: 0.9;
  --btn-opacity-hover: 1;
  --btn-opacity-active: 1;
  --btn-padding-sm: 8px 12px 8px 12px;
  --btn-padding-md: 10px 16px 10px 16px;
  --btn-padding-lg: 14px 20px 14px 20px;
  --btn-padding-xl: 24px 48px 24px 48px;
  --btn-size-sm: 12px;
  --btn-size-md: 14px;
  --btn-size-lg: 18px;
  --btn-size-xl: 28px;
  --btn-border-radius-sm: 8px;
  --btn-border-radius-md: 8px;
  --btn-border-radius-lg: 8px;
  --btn-border-radius-xl: 8px;
  --btn-primary-border: 1px solid var(--color-primary-300);
  --btn-primary-color: var(--color-on-primary);
  --btn-primary-background: linear-gradient(88deg, var(--color-primary-400) 0%, var(--color-primary-500) 100%);
  --btn-primary-border-hover: 1px solid var(--color-secondary-400);
  --btn-primary-color-hover: var(--color-generic-0);
  --btn-primary-background-hover: linear-gradient(88deg, var(--color-secondary-400) 0%, var(--color-secondary-500) 100%);
  --btn-primary-box-shadow-hover: unset;
  --btn-primary-border-active: 1px solid var(--color-primary-300);
  --btn-primary-color-active: var(--color-primary-300);
  --btn-primary-background-active: linear-gradient(88deg, var(--color-secondary-400) 0%, var(--color-secondary-500) 100%);
  --btn-primary-box-shadow-active: 0 0 0 0.3em var(--color-primary-300);
  --btn-primary-border-focus: 1px solid var(--color-primary-300);
  --btn-primary-color-focus: var(--color-primary-50);
  --btn-primary-background-focus: linear-gradient(88deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  --btn-primary-box-shadow-focus: 0 0 0 0.3em var(--color-primary-300);
  --btn-primary-border-disabled: 1px solid var(--color-primary-100);
  --btn-primary-color-disabled: var(--color-primary-50);
  --btn-primary-background-disabled: var(--color-primary-100);
  --btn-primary-box-shadow-disabled: unset;
  --btn-primary-destructive-border: 1px solid var(--color-destructive-500, #EE2E2E);
  --btn-primary-destructive-color: var(--color-generic-0);
  --btn-primary-destructive-background: var(--color-destructive-500, #EE2E2E);
  --btn-primary-destructive-border-hover: 1px solid var(--color-destructive-400, #F97070);
  --btn-primary-destructive-color-hover: var(--color-generic-0);
  --btn-primary-destructive-background-hover: var(--color-destructive-400, #F97070);
  --btn-primary-destructive-box-shadow-hover: unset;
  --btn-primary-destructive-border-active: 1px solid var(--color-destructive-400, #F97070);
  --btn-primary-destructive-color-active: var(--color-destructive-200, #FECACA);
  --btn-primary-destructive-background-active: var(--color-destructive-600, #DD2525);
  --btn-primary-destructive-box-shadow-active: unset;
  --btn-primary-destructive-border-focus: 1px solid var(--color-destructive-400, #F97070);
  --btn-primary-destructive-color-focus: var(--color-destructive-200, #FECACA);
  --btn-primary-destructive-background-focus: var(--color-destructive-600, #DD2525);
  --btn-primary-destructive-box-shadow-focus: 0 0 0 0.3em var(--color-destructive-100, #FBBEBE);
  --btn-primary-destructive-border-disabled: 1px solid var(--color-destructive-200, #FECACA);
  --btn-primary-destructive-color-disabled: var(--color-destructive-200, #FECACA);
  --btn-primary-destructive-background-disabled: var(--color-destructive-300, #FCA5A5);
  --btn-primary-destructive-box-shadow-disabled: unset;
  --btn-secondary-border: 1px solid transparent;
  --btn-secondary-color: var(--color-primary);
  --btn-secondary-background: var(--primary-100, #DBEBFF);
  --btn-secondary-border-hover: 1px solid transparent;
  --btn-secondary-color-hover: var(--color-secondary-600);
  --btn-secondary-background-hover: var(--color-secondary-200);
  --btn-secondary-box-shadow-hover: unset;
  --btn-secondary-border-active: 1px solid var(--color-primary-300);
  --btn-secondary-color-active: var(--color-primary-400);
  --btn-secondary-background-active: var(--color-primary-200);
  --btn-secondary-box-shadow-active: unset;
  --btn-secondary-border-focus: 1px solid var(--color-primary-300);
  --btn-secondary-color-focus: var(--color-primary-400);
  --btn-secondary-background-focus: var(--color-primary-200);
  --btn-secondary-box-shadow-focus: 0 0 0 0.3em var(--color-primary-300);
  --btn-secondary-border-disabled: 1px solid var(--color-primary-50, #F0F6FF);
  --btn-secondary-color-disabled: var(--color-primary-200, #B3D4FF);
  --btn-secondary-background-disabled: var(--color-primary-50, #F0F6FF);
  --btn-secondary-box-shadow-disabled: unset;
  --btn-secondary-destructive-border: 1px solid transparent;
  --btn-secondary-destructive-color: var(--color-destructive-600, #DD2525);
  --btn-secondary-destructive-background: var(--color-destructive-50, #FEF2F2);
  --btn-secondary-destructive-border-hover: 1px solid transparent;
  --btn-secondary-destructive-color-hover: var(--color-destructive-200, #FECACA);
  --btn-secondary-destructive-background-hover: var(--color-destructive-600, #DD2525);
  --btn-secondary-destructive-box-shadow-hover: unset;
  --btn-secondary-destructive-border-active: 1px solid var(--color-destructive-200, #FECACA);
  --btn-secondary-destructive-color-active: var(--color-destructive-500, #EE2E2E);
  --btn-secondary-destructive-background-active: var(--color-destructive-100, #FEE2E2);
  --btn-secondary-destructive-box-shadow-active: unset;
  --btn-secondary-destructive-border-focus: 1px solid var(--color-destructive-200, #FECACA);
  --btn-secondary-destructive-color-focus: var(--color-destructive-500, #EE2E2E);
  --btn-secondary-destructive-background-focus: var(--color-destructive-100, #FEE2E2);
  --btn-secondary-destructive-box-shadow-focus: 0 0 0 0.3em var(--color-destructive-100, #FBBEBE);
  --btn-secondary-destructive-border-disabled: 1px solid var(--color-destructive-50, #FEF2F2);
  --btn-secondary-destructive-color-disabled: var(--color-destructive-300, #FCA5A5);
  --btn-secondary-destructive-background-disabled: var(--color-destructive-50, #FEF2F2);
  --btn-secondary-destructive-box-shadow-disabled: unset;
  --btn-tertiary-border: 1px solid var(--color-neutral-200, #E4E4E4);
  --btn-tertiary-color: var(--color-neutral-700, #525252);
  --btn-tertiary-background: var(--color-generic-0, #FFF);
  --btn-tertiary-border-hover: 1px solid var(--color-slate-300, #CAD4E0);
  --btn-tertiary-color-hover: var(--color-slate-700, #475569);
  --btn-tertiary-background-hover: var(--color-slate-100, #F0F4F8);
  --btn-tertiary-box-shadow-hover: unset;
  --btn-tertiary-border-active: 1px solid var(--color-neutral-300, #D3D3D3);
  --btn-tertiary-color-active: var(--color-neutral-500, #8A8A8A);
  --btn-tertiary-background-active: var(--color-neutral-100, #F4F4F4);
  --btn-tertiary-box-shadow-active: unset;
  --btn-tertiary-border-focus: 1px solid var(--color-neutral-300, #D3D3D3);
  --btn-tertiary-color-focus: var(--color-neutral-500, #8A8A8A);
  --btn-tertiary-background-focus: var(--color-neutral-50, #F9F9F9);
  --btn-tertiary-box-shadow-focus: 0px 0px 0px 4px #CBCBCB;
  --btn-tertiary-border-disabled: 1px solid var(--color-neutral-200, #E4E4E4);
  --btn-tertiary-color-disabled: var(--color-neutral-300, #D3D3D3);
  --btn-tertiary-background-disabled: var(--color-generic-0, #FFFFFF);
  --btn-tertiary-box-shadow-disabled: unset;
  --btn-tertiary-destructive-border: 1px solid var(--color-destructive-200, #FECACA);
  --btn-tertiary-destructive-color: var(--color-destructive-500, #EE2E2E);
  --btn-tertiary-destructive-background: var(--color-generic-0, #FFFFFF);
  --btn-tertiary-destructive-border-hover: 1px solid var(--color-destructive-300, #FCA5A5);
  --btn-tertiary-destructive-color-hover: var(--color-destructive-500, #EE2E2E);
  --btn-tertiary-destructive-background-hover: var(--color-destructive-300, #FCA5A5);
  --btn-tertiary-destructive-box-shadow-hover: unset;
  --btn-tertiary-destructive-border-active: 1px solid var(--color-destructive-300, #FCA5A5);
  --btn-tertiary-destructive-color-active: var(--color-destructive-400, #F97070);
  --btn-tertiary-destructive-background-active: var(--color-destructive-50, #FEF2F2);
  --btn-tertiary-destructive-box-shadow-active: unset;
  --btn-tertiary-destructive-border-focus: 1px solid var(--color-destructive-300, #FCA5A5);
  --btn-tertiary-destructive-color-focus: var(--color-destructive-400, #F97070);
  --btn-tertiary-destructive-background-focus: var(--color-destructive-50, #FEF2F2);
  --btn-tertiary-destructive-box-shadow-focus: 0px 0px 0px 4px var(--color-destructive-100, #FBBEBE);
  --btn-tertiary-destructive-border-disabled: 1px solid var(--color-destructive-200, #FECACA);
  --btn-tertiary-destructive-color-disabled: var(--color-destructive-300, #FCA5A5);
  --btn-tertiary-destructive-background-disabled: var(--color-generic-0, #FFFFFF);
  --btn-tertiary-destructive-box-shadow-disabled: unset;
  --btn-outline-border: 1px solid var(--color-primary-500, #004AAD);
  --btn-outline-color: var(--color-primary-500, #004AAD);
  --btn-outline-background: transparent;
  --btn-outline-border-hover: 1px solid var(--color-secondary-600, #E4B602);
  --btn-outline-color-hover: var(--color-secondary-600, #E4B602);
  --btn-outline-background-hover: transparent;
  --btn-outline-box-shadow-hover: unset;
  --btn-outline-border-active: 1px solid var(--color-primary-400, #2E89FF);
  --btn-outline-color-active: var(--color-primary-400, #2E89FF);
  --btn-outline-background-active: var(--color-primary-50, #2E89FF);
  --btn-outline-box-shadow-active: 0 0 0 0.3em var(--color-primary-400);
  --btn-outline-border-focus: 1px solid var(--color-primary-400, #2E89FF);
  --btn-outline-color-focus: var(--color-primary-500, #004AAD);
  --btn-outline-background-focus: var(--color-primary-50, #2E89FF);
  --btn-outline-box-shadow-focus: 0 0 0 0.2em var(--color-primary-400);
  --btn-outline-border-disabled: 1px solid var(--color-primary-200, #B3D4FF);
  --btn-outline-color-disabled: var(--color-primary-200, #B3D4FF);
  --btn-outline-background-disabled: transparent;
  --btn-outline-box-shadow-disabled: unset;
  --btn-outline-destructive-border: 1px solid var(--color-destructive-500, #EE2E2E);
  --btn-outline-destructive-color: var(--color-destructive-500, #EE2E2E);
  --btn-outline-destructive-background: transparent;
  --btn-outline-destructive-border-hover: 1px solid var(--color-destructive-400, #F97070);
  --btn-outline-destructive-color-hover: var(--color-destructive-400, #F97070);
  --btn-outline-destructive-background-hover: var(--color-destructive-50, #FEF2F2);
  --btn-outline-destructive-box-shadow-hover: unset;
  --btn-outline-destructive-border-active: 1px solid var(--color-destructive-400, #F97070);
  --btn-outline-destructive-color-active: var(--color-destructive-400, #F97070);
  --btn-outline-destructive-background-active: var(--color-destructive-200, #FECACA);
  --btn-outline-destructive-box-shadow-active: unset;
  --btn-outline-destructive-border-focus: 1px solid var(--color-destructive-400, #F97070);
  --btn-outline-destructive-color-focus: var(--color-destructive-500, #EE2E2E);
  --btn-outline-destructive-background-focus: transparent;
  --btn-outline-destructive-box-shadow-focus: 0 0 0 0.2em var(--color-destructive-400, #F97070);
  --btn-outline-destructive-border-disabled: 1px solid var(--color-destructive-300, #FCA5A5);
  --btn-outline-destructive-color-disabled: var(--color-destructive-300, #FCA5A5);
  --btn-outline-destructive-background-disabled: transparent;
  --btn-outline-destructive-box-shadow-disabled: unset;
  --btn-link-border: 1px solid transparent;
  --btn-link-color: var(--color-primary-500, #004AAD);
  --btn-link-background: transparent;
  --btn-link-border-hover: 1px solid transparent;
  --btn-link-color-hover: var(--color-secondary-600, #E4B602);
  --btn-link-background-hover: transparent;
  --btn-link-box-shadow-hover: unset;
  --btn-link-border-active: 1px solid transparent;
  --btn-link-color-active: var(--color-primary-400, #2E89FF);
  --btn-link-background-active: transparent;
  --btn-link-box-shadow-active: unset;
  --btn-link-border-focus: 1px solid var(--color-primary-500, #004AAD);
  --btn-link-color-focus: var(--color-primary-500, #004AAD);
  --btn-link-background-focus: transparent;
  --btn-link-box-shadow-focus: unset;
  --btn-link-border-disabled: 1px solid transparent;
  --btn-link-color-disabled: var(--color-primary-200, #B3D4FF);
  --btn-link-background-disabled: transparent;
  --btn-link-box-shadow-disabled: unset;
  --btn-link-destructive-border: 1px solid transparent;
  --btn-link-destructive-color: var(--color-destructive-500, #EE2E2E);
  --btn-link-destructive-background: transparent;
  --btn-link-destructive-border-hover: 1px solid transparent;
  --btn-link-destructive-color-hover: var(--color-destructive-400, #F97070);
  --btn-link-destructive-background-hover: transparent;
  --btn-link-destructive-box-shadow-hover: unset;
  --btn-link-destructive-border-active: 1px solid transparent;
  --btn-link-destructive-color-active: var(--color-destructive-600, #DD2525);
  --btn-link-destructive-background-active: transparent;
  --btn-link-destructive-box-shadow-active: unset;
  --btn-link-destructive-border-focus: 1px solid var(--color-destructive-500, #EE2E2E);
  --btn-link-destructive-color-focus: var(--color-destructive-500, #EE2E2E);
  --btn-link-destructive-background-focus: transparent;
  --btn-link-destructive-box-shadow-focus: unset;
  --btn-link-destructive-border-disabled: 1px solid transparent;
  --btn-link-destructive-color-disabled: var(--color-destructive-300, #FCA5A5);
  --btn-link-destructive-background-disabled: transparent;
  --btn-link-destructive-box-shadow-disabled: unset; }

.btn {
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  box-sizing: border-box;
  transition-duration: var(--btn-transition-duration);
  opacity: var(--btn-opacity);
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .btn:hover {
    box-shadow: var(--btn-shadow-hover);
    opacity: var(--btn-opacity-hover); }
  .btn:active {
    box-shadow: var(--btn-shadow-active);
    opacity: var(--btn-opacity-active); }
  .btn:disabled {
    cursor: not-allowed; }

.btn-sm {
  border-radius: var(--btn-border-radius-sm);
  font-size: var(--btn-size-sm);
  font-weight: 500;
  padding: var(--btn-padding-sm); }
  .btn-sm svg {
    width: 1.5em;
    margin-left: 0.3em;
    margin-right: 0.3em; }

.btn-md {
  border-radius: var(--btn-border-radius-md);
  font-size: var(--btn-size-md);
  font-weight: 500;
  padding: var(--btn-padding-md); }
  .btn-md svg {
    width: 1.5em;
    margin-left: 0.3em;
    margin-right: 0.3em; }

.btn-lg {
  border-radius: var(--btn-border-radius-lg);
  font-size: var(--btn-size-lg);
  font-weight: 500;
  padding: var(--btn-padding-lg); }
  .btn-lg svg {
    width: 1.5em;
    margin-left: 0.3em;
    margin-right: 0.3em; }

.btn-xl {
  border-radius: var(--btn-border-radius-xl);
  font-size: var(--btn-size-xl);
  font-weight: 500;
  padding: var(--btn-padding-xl); }
  .btn-xl svg {
    width: 1.5em;
    margin-left: 0.3em;
    margin-right: 0.3em; }

.btn-primary {
  border: var(--btn-primary-border);
  color: var(--btn-primary-color);
  background: var(--btn-primary-background);
  box-shadow: var(--btn-primary-box-shadow); }
  .btn-primary:hover {
    border: var(--btn-primary-border-hover);
    color: var(--btn-primary-color-hover);
    background: var(--btn-primary-background-hover);
    box-shadow: var(--btn-primary-box-shadow-hover); }
  .btn-primary:active {
    border: var(--btn-primary-border-active);
    color: var(--btn-primary-color-active);
    background: var(--btn-primary-background-active);
    box-shadow: var(--btn-primary-box-shadow-active); }
  .btn-primary:focus {
    border: var(--btn-primary-border-focus);
    color: var(--btn-primary-color-focus);
    background: var(--btn-primary-background-focus);
    box-shadow: var(--btn-primary-box-shadow-focus); }
  .btn-primary:disabled {
    border: var(--btn-primary-border-disabled);
    color: var(--btn-primary-color-disabled);
    background: var(--btn-primary-background-disabled);
    box-shadow: var(--btn-primary-box-shadow-disabled); }

.btn-secondary {
  border: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
  background: var(--btn-secondary-background);
  box-shadow: var(--btn-secondary-box-shadow); }
  .btn-secondary:hover {
    border: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-color-hover);
    background: var(--btn-secondary-background-hover);
    box-shadow: var(--btn-secondary-box-shadow-hover); }
  .btn-secondary:active {
    border: var(--btn-secondary-border-active);
    color: var(--btn-secondary-color-active);
    background: var(--btn-secondary-background-active);
    box-shadow: var(--btn-secondary-box-shadow-active); }
  .btn-secondary:focus {
    border: var(--btn-secondary-border-focus);
    color: var(--btn-secondary-color-focus);
    background: var(--btn-secondary-background-focus);
    box-shadow: var(--btn-secondary-box-shadow-focus); }
  .btn-secondary:disabled {
    border: var(--btn-secondary-border-disabled);
    color: var(--btn-secondary-color-disabled);
    background: var(--btn-secondary-background-disabled);
    box-shadow: var(--btn-secondary-box-shadow-disabled); }

.btn-tertiary {
  border: var(--btn-tertiary-border);
  color: var(--btn-tertiary-color);
  background: var(--btn-tertiary-background);
  box-shadow: var(--btn-tertiary-box-shadow); }
  .btn-tertiary:hover {
    border: var(--btn-tertiary-border-hover);
    color: var(--btn-tertiary-color-hover);
    background: var(--btn-tertiary-background-hover);
    box-shadow: var(--btn-tertiary-box-shadow-hover); }
  .btn-tertiary:active {
    border: var(--btn-tertiary-border-active);
    color: var(--btn-tertiary-color-active);
    background: var(--btn-tertiary-background-active);
    box-shadow: var(--btn-tertiary-box-shadow-active); }
  .btn-tertiary:focus {
    border: var(--btn-tertiary-border-focus);
    color: var(--btn-tertiary-color-focus);
    background: var(--btn-tertiary-background-focus);
    box-shadow: var(--btn-tertiary-box-shadow-focus); }
  .btn-tertiary:disabled {
    border: var(--btn-tertiary-border-disabled);
    color: var(--btn-tertiary-color-disabled);
    background: var(--btn-tertiary-background-disabled);
    box-shadow: var(--btn-tertiary-box-shadow-disabled); }

.btn-outline {
  border: var(--btn-outline-border);
  color: var(--btn-outline-color);
  background: var(--btn-outline-background);
  box-shadow: var(--btn-outline-box-shadow); }
  .btn-outline:hover {
    border: var(--btn-outline-border-hover);
    color: var(--btn-outline-color-hover);
    background: var(--btn-outline-background-hover);
    box-shadow: var(--btn-outline-box-shadow-hover); }
  .btn-outline:active {
    border: var(--btn-outline-border-active);
    color: var(--btn-outline-color-active);
    background: var(--btn-outline-background-active);
    box-shadow: var(--btn-outline-box-shadow-active); }
  .btn-outline:focus {
    border: var(--btn-outline-border-focus);
    color: var(--btn-outline-color-focus);
    background: var(--btn-outline-background-focus);
    box-shadow: var(--btn-outline-box-shadow-focus); }
  .btn-outline:disabled {
    border: var(--btn-outline-border-disabled);
    color: var(--btn-outline-color-disabled);
    background: var(--btn-outline-background-disabled);
    box-shadow: var(--btn-outline-box-shadow-disabled); }

.btn-link {
  border: var(--btn-link-border);
  color: var(--btn-link-color);
  background: var(--btn-link-background);
  box-shadow: var(--btn-link-box-shadow); }
  .btn-link:hover {
    border: var(--btn-link-border-hover);
    color: var(--btn-link-color-hover);
    background: var(--btn-link-background-hover);
    box-shadow: var(--btn-link-box-shadow-hover); }
  .btn-link:active {
    border: var(--btn-link-border-active);
    color: var(--btn-link-color-active);
    background: var(--btn-link-background-active);
    box-shadow: var(--btn-link-box-shadow-active); }
  .btn-link:focus {
    border: var(--btn-link-border-focus);
    color: var(--btn-link-color-focus);
    background: var(--btn-link-background-focus);
    box-shadow: var(--btn-link-box-shadow-focus); }
  .btn-link:disabled {
    border: var(--btn-link-border-disabled);
    color: var(--btn-link-color-disabled);
    background: var(--btn-link-background-disabled);
    box-shadow: var(--btn-link-box-shadow-disabled); }

.btn-primary-destructive {
  border: var(--btn-primary-destructive-border);
  color: var(--btn-primary-destructive-color);
  background: var(--btn-primary-destructive-background);
  box-shadow: var(--btn-primary-destructive-box-shadow); }
  .btn-primary-destructive:hover {
    border: var(--btn-primary-destructive-border-hover);
    color: var(--btn-primary-destructive-color-hover);
    background: var(--btn-primary-destructive-background-hover);
    box-shadow: var(--btn-primary-destructive-box-shadow-hover); }
  .btn-primary-destructive:active {
    border: var(--btn-primary-destructive-border-active);
    color: var(--btn-primary-destructive-color-active);
    background: var(--btn-primary-destructive-background-active);
    box-shadow: var(--btn-primary-destructive-box-shadow-active); }
  .btn-primary-destructive:focus {
    border: var(--btn-primary-destructive-border-focus);
    color: var(--btn-primary-destructive-color-focus);
    background: var(--btn-primary-destructive-background-focus);
    box-shadow: var(--btn-primary-destructive-box-shadow-focus); }
  .btn-primary-destructive:disabled {
    border: var(--btn-primary-destructive-border-disabled);
    color: var(--btn-primary-destructive-color-disabled);
    background: var(--btn-primary-destructive-background-disabled);
    box-shadow: var(--btn-primary-destructive-box-shadow-disabled); }

.btn-secondary-destructive {
  border: var(--btn-secondary-destructive-border);
  color: var(--btn-secondary-destructive-color);
  background: var(--btn-secondary-destructive-background);
  box-shadow: var(--btn-secondary-destructive-box-shadow); }
  .btn-secondary-destructive:hover {
    border: var(--btn-secondary-destructive-border-hover);
    color: var(--btn-secondary-destructive-color-hover);
    background: var(--btn-secondary-destructive-background-hover);
    box-shadow: var(--btn-secondary-destructive-box-shadow-hover); }
  .btn-secondary-destructive:active {
    border: var(--btn-secondary-destructive-border-active);
    color: var(--btn-secondary-destructive-color-active);
    background: var(--btn-secondary-destructive-background-active);
    box-shadow: var(--btn-secondary-destructive-box-shadow-active); }
  .btn-secondary-destructive:focus {
    border: var(--btn-secondary-destructive-border-focus);
    color: var(--btn-secondary-destructive-color-focus);
    background: var(--btn-secondary-destructive-background-focus);
    box-shadow: var(--btn-secondary-destructive-box-shadow-focus); }
  .btn-secondary-destructive:disabled {
    border: var(--btn-secondary-destructive-border-disabled);
    color: var(--btn-secondary-destructive-color-disabled);
    background: var(--btn-secondary-destructive-background-disabled);
    box-shadow: var(--btn-secondary-destructive-box-shadow-disabled); }

.btn-tertiary-destructive {
  border: var(--btn-tertiary-destructive-border);
  color: var(--btn-tertiary-destructive-color);
  background: var(--btn-tertiary-destructive-background);
  box-shadow: var(--btn-tertiary-destructive-box-shadow); }
  .btn-tertiary-destructive:hover {
    border: var(--btn-tertiary-destructive-border-hover);
    color: var(--btn-tertiary-destructive-color-hover);
    background: var(--btn-tertiary-destructive-background-hover);
    box-shadow: var(--btn-tertiary-destructive-box-shadow-hover); }
  .btn-tertiary-destructive:active {
    border: var(--btn-tertiary-destructive-border-active);
    color: var(--btn-tertiary-destructive-color-active);
    background: var(--btn-tertiary-destructive-background-active);
    box-shadow: var(--btn-tertiary-destructive-box-shadow-active); }
  .btn-tertiary-destructive:focus {
    border: var(--btn-tertiary-destructive-border-focus);
    color: var(--btn-tertiary-destructive-color-focus);
    background: var(--btn-tertiary-destructive-background-focus);
    box-shadow: var(--btn-tertiary-destructive-box-shadow-focus); }
  .btn-tertiary-destructive:disabled {
    border: var(--btn-tertiary-destructive-border-disabled);
    color: var(--btn-tertiary-destructive-color-disabled);
    background: var(--btn-tertiary-destructive-background-disabled);
    box-shadow: var(--btn-tertiary-destructive-box-shadow-disabled); }

.btn-outline-destructive {
  border: var(--btn-outline-destructive-border);
  color: var(--btn-outline-destructive-color);
  background: var(--btn-outline-destructive-background);
  box-shadow: var(--btn-outline-destructive-box-shadow); }
  .btn-outline-destructive:hover {
    border: var(--btn-outline-destructive-border-hover);
    color: var(--btn-outline-destructive-color-hover);
    background: var(--btn-outline-destructive-background-hover);
    box-shadow: var(--btn-outline-destructive-box-shadow-hover); }
  .btn-outline-destructive:active {
    border: var(--btn-outline-destructive-border-active);
    color: var(--btn-outline-destructive-color-active);
    background: var(--btn-outline-destructive-background-active);
    box-shadow: var(--btn-outline-destructive-box-shadow-active); }
  .btn-outline-destructive:focus {
    border: var(--btn-outline-destructive-border-focus);
    color: var(--btn-outline-destructive-color-focus);
    background: var(--btn-outline-destructive-background-focus);
    box-shadow: var(--btn-outline-destructive-box-shadow-focus); }
  .btn-outline-destructive:disabled {
    border: var(--btn-outline-destructive-border-disabled);
    color: var(--btn-outline-destructive-color-disabled);
    background: var(--btn-outline-destructive-background-disabled);
    box-shadow: var(--btn-outline-destructive-box-shadow-disabled); }

.btn-link-destructive {
  border: var(--btn-link-destructive-border);
  color: var(--btn-link-destructive-color);
  background: var(--btn-link-destructive-background);
  box-shadow: var(--btn-link-destructive-box-shadow); }
  .btn-link-destructive:hover {
    border: var(--btn-link-destructive-border-hover);
    color: var(--btn-link-destructive-color-hover);
    background: var(--btn-link-destructive-background-hover);
    box-shadow: var(--btn-link-destructive-box-shadow-hover); }
  .btn-link-destructive:active {
    border: var(--btn-link-destructive-border-active);
    color: var(--btn-link-destructive-color-active);
    background: var(--btn-link-destructive-background-active);
    box-shadow: var(--btn-link-destructive-box-shadow-active); }
  .btn-link-destructive:focus {
    border: var(--btn-link-destructive-border-focus);
    color: var(--btn-link-destructive-color-focus);
    background: var(--btn-link-destructive-background-focus);
    box-shadow: var(--btn-link-destructive-box-shadow-focus); }
  .btn-link-destructive:disabled {
    border: var(--btn-link-destructive-border-disabled);
    color: var(--btn-link-destructive-color-disabled);
    background: var(--btn-link-destructive-background-disabled);
    box-shadow: var(--btn-link-destructive-box-shadow-disabled); }