.button,
.krds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--krds-radius-small3);
    padding: 0 var(--krds-padding-4);
    min-width: 2.5rem;
    font-weight: var(--krds-font-weight-regular);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.button:hover,
.krds-btn:hover {
    text-decoration: none;
}

.button:disabled,
.krds-btn:disabled,
.button[aria-disabled="true"],
.krds-btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.button.primary,
.button-primary,
.krds-btn.primary {
    color: var(--krds-color-light-gray-0);
    border-color: var(--krds-color-light-primary-50);
    background-color: var(--krds-color-light-primary-50);
}

.button.primary:hover,
.button-primary:hover,
.krds-btn.primary:hover {
    background-color: var(--krds-color-light-primary-60);
    border-color: var(--krds-color-light-primary-60);
}

.button.primary:active,
.button-primary:active,
.button.primary:focus-visible,
.button-primary:focus-visible,
.krds-btn.primary:active,
.krds-btn.primary:focus-visible {
    background-color: var(--krds-color-light-primary-70);
    border-color: var(--krds-color-light-primary-70);
}

.button.secondary,
.button-secondary,
.krds-btn.secondary {
    color: var(--krds-color-light-primary-60);
    border-color: var(--krds-color-light-primary-50);
    background-color: var(--krds-color-light-primary-5);
}

.button.secondary:hover,
.button-secondary:hover,
.krds-btn.secondary:hover {
    background-color: var(--krds-color-light-primary-10);
}

.button.secondary:active,
.button-secondary:active,
.button.secondary:focus-visible,
.button-secondary:focus-visible,
.krds-btn.secondary:active,
.krds-btn.secondary:focus-visible {
    background-color: var(--krds-color-light-primary-20);
}

.button.tertiary,
.button-tertiary,
.button-ghost,
.krds-btn.tertiary {
    color: var(--krds-color-light-gray-90);
    border-color: var(--krds-color-light-gray-60);
    background-color: transparent;
}

.button.tertiary:hover,
.button-tertiary:hover,
.button-ghost:hover,
.krds-btn.tertiary:hover {
    background-color: var(--krds-color-light-gray-5);
}

.button.tertiary:active,
.button-tertiary:active,
.button-ghost:active,
.button.tertiary:focus-visible,
.button-tertiary:focus-visible,
.button-ghost:focus-visible,
.krds-btn.tertiary:active,
.krds-btn.tertiary:focus-visible {
    background-color: var(--krds-color-light-gray-10);
}

.button.text,
.button-text,
.krds-btn.text {
    padding-inline: var(--krds-padding-3);
    border-color: transparent;
    background-color: transparent;
    color: var(--krds-color-light-gray-90);
}

.button.text:hover,
.button-text:hover,
.krds-btn.text:hover {
    background-color: var(--krds-color-light-gray-5);
}

.button.text:active,
.button-text:active,
.button.text:focus-visible,
.button-text:focus-visible,
.krds-btn.text:active,
.krds-btn.text:focus-visible {
    background-color: var(--krds-color-light-gray-10);
}

.button.xsmall,
.button-xsmall,
.krds-btn.xsmall {
    height: var(--krds-size-height-5);
    padding-inline: var(--krds-padding-4);
    border-radius: var(--krds-radius-small3);
    font-size: 0.875rem;
}

.button.small,
.button-sm,
.button-small,
.krds-btn.small {
    height: var(--krds-size-height-6);
    padding-inline: var(--krds-padding-5);
    border-radius: var(--krds-radius-small3);
    font-size: 0.9375rem;
}

.button.medium,
.button-md,
.button-medium,
.krds-btn.medium {
    height: var(--krds-size-height-7);
    padding-inline: var(--krds-padding-6);
    border-radius: var(--krds-radius-medium1);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
}

.button.large,
.button-lg,
.button-large,
.krds-btn.large {
    height: var(--krds-size-height-8);
    padding-inline: var(--krds-padding-7);
    border-radius: var(--krds-radius-medium2);
    font-size: 1.0625rem;
    font-weight: var(--font-weight-medium);
}

.button.xlarge,
.button-xl,
.button-xlarge,
.krds-btn.xlarge {
    height: 4rem;
    padding-inline: 1.5rem;
    border-radius: var(--krds-radius-medium2);
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
}