:root {
    /* sizing */
    --btn-height: 42px;
    --btn-height-cta: 58px;
    --btn-padding-x: var(--spacing-4x);
    --btn-font-size: 14px;
    --btn-font-weight: 600;
    --btn-border-radius: var(--border-radius-1x);

    /* animation */
    --btn-transition: background-color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, color 0.2s ease;

    /* primary */
    --btn-primary-bg: transparent;
    --btn-primary-border: var(--color-primary);
    --btn-primary-hover-bg: var(--color-primary-hover);
    --btn-primary-active-bg: var(--color-primary-active);
    --btn-primary-active-text: var(--color-text-strong);
    --btn-primary-focus-shadow: var(--color-primary-focus-visible);

    /* secondary */
    --btn-secondary-bg: transparent;
    --btn-secondary-border: var(--color-text-soft);
    --btn-secondary-hover-bg: var(--color-primary-hover);
    --btn-secondary-active-bg: var(--color-primary-active);
    --btn-secondary-active-text: var(--color-text-strong);
    --btn-secondary-focus-shadow: var(--color-primary-focus-visible);

    /* --outline */
    --btn-outline-border: var(--color-secondary);
    --btn-outline-hover-bg: var(--color-secondary-hover);
    --btn-outline-active-bg: var(--color-secondary-active);
    --btn-outline-active-text: var(--color-text-strong);
    --btn-outline-focus-shadow: var(--color-secondary-focus-visible);

    /* ghost */
    --btn-ghost-hover-bg: var(--color-secondary-hover);
    --btn-ghost-active-bg: var(--color-secondary-active);
    --btn-ghost-active-text: var(--color-text-strong);
    --btn-ghost-focus-shadow: var(--color-secondary-focus-visible);

    /* disabled */
    --btn-disabled-bg: transparent;
    --btn-disabled-border: var(--color-disabled);
    --btn-disabled-text: var(--color-disabled);
}

/* Base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: var(--btn-transition);
}

/* — Primary — */
.btn--primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--btn-primary-hover-bg);
    color: var(--btn-primary-active-text);
}

.btn--primary:focus-visible {
    outline: none;
    background-color: var(--btn-primary-hover-bg);
    color: var(--btn-primary-active-text);
    box-shadow: 0 0 0 3px var(--btn-primary-focus-shadow);
}

.btn--primary:active {
    background-color: var(--btn-primary-active-bg);
    color: var(--btn-primary-active-text);
}

.btn--primary:disabled {
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    color: var(--btn-disabled-text);
    cursor: not-allowed;
}

/* — Outline — */
.btn--outline {
    border-color: var(--btn-outline-border);
    color: var(--color-secondary);
}

/* — Secondary — */
.btn--secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--color-text-soft);
}

.btn--secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-active-text);
}

.btn--secondary:focus-visible {
    outline: none;
    background-color: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-active-text);
    box-shadow: 0 0 0 3px var(--btn-secondary-focus-shadow);
}

.btn--secondary:active {
    background-color: var(--btn-secondary-active-bg);
    color: var(--btn-secondary-active-text);
}

.btn--secondary:disabled {
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    color: var(--btn-disabled-text);
    cursor: not-allowed;
}

/* — Outline — */
.btn--outline {
    border-color: var(--btn-outline-border);
    color: var(--color-secondary);
}

.btn--outline:hover {
    background-color: var(--btn-outline-hover-bg);
    color: var(--btn-outline-active-text);
}

.btn--outline:focus-visible {
    outline: none;
    background-color: var(--btn-outline-hover-bg);
    color: var(--btn-outline-active-text);
    box-shadow: 0 0 0 3px var(--btn-outline-focus-shadow);
}

.btn--outline:active {
    background-color: var(--btn-outline-active-bg);
    color: var(--btn-outline-active-text);
}

.btn--outline:disabled {
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    color: var(--btn-disabled-text);
    cursor: not-allowed;
}

/* — Ghost — */
.btn--ghost {
    color: var(--color-secondary);
    background: transparent;
    border: none;
}

.btn--ghost:hover {
    background-color: var(--btn-ghost-hover-bg);
    color: var(--btn-ghost-active-text);
}

.btn--ghost:focus-visible {
    outline: none;
    background-color: var(--btn-ghost-hover-bg);
    color: var(--btn-ghost-active-text);
    box-shadow: 0 0 0 3px var(--btn-ghost-focus-shadow);
}

.btn--ghost:active {
    background-color: var(--btn-ghost-active-bg);
    color: var(--btn-ghost-active-text);
}

.btn--ghost:disabled {
    background-color: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    cursor: not-allowed;
}

/* — cta — */
.btn--cta {
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-width: 2px;
    background-color: transparent;
    height: var(--btn-height-cta);
}

.btn--cta:hover {
    background-color: var(--color-primary-hover);
    color: var(--btn-primary-active-text);
}

.btn--cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--btn-primary-focus-shadow);
    background-color: var(--color-primary-hover);
    color: var(--btn-primary-active-text);
}

.btn--cta:active {
    background-color: var(--color-primary-active);
    color: var(--btn-primary-active-text);
}

.btn--cta:disabled {
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    color: var(--btn-disabled-text);
    cursor: not-allowed;
}

.btn-with-icon {
    gap: var(--spacing-2x);
}

.btn--interest-picker {
    --btn-interest-border-text-color: var(--color-text-soft);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    color: var(--btn-interest-border-text-color);
    border: 1px solid var(--bg-item-border);
    background-color: var(--bg-item);
    min-height: 48px;
    place-content: start;
    padding: 0;
    padding-inline: var(--spacing-4x);
    padding-block: var(--spacing-3x);
    width: min(30rem, 100%);
}

.btn--interest-picker:hover,
.btn--interest-picker:focus-visible,
.btn--interest-picker-selected {
    color: var(--btn-outline-active-text);
    border-color: var(--btn-outline-border);
}

.btn--interest-picker:disabled {
    background-color: transparent;
    color: var(--color-text-soft);
    border-color: var(--bg-item-border);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Apply as extra style to a .btn element if it only shows icon */
.btn-icon-only {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--btn-height);
    width: var(--btn-height);
    padding: 0;
}