/* Opt-in design-system variants for the existing .button component. */
.button.flat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: var(--space-2) var(--space-4);
    border: var(--border-width) solid var(--color-accent);
    border-radius: var(--radius-button);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--text-backend-body-size);
    font-weight: var(--text-backend-h3-weight);
    line-height: var(--text-backend-body-line-height);
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    transition: background-color var(--transition-duration) var(--transition-easing);
}

.button.flat:hover {
    background: var(--color-accent-hover);
    color: var(--color-on-accent);
    box-shadow: none;
    transform: none;
}

.button.flat i[class^="icon-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: static;
    top: 0;
    width: auto;
    height: auto;
    margin: 0;
    font-size: var(--icon-size-supporting);
    line-height: 1;
}

.button.flat:active {
    background: var(--color-accent-active);
}

.button.flat:disabled {
    border-color: var(--color-gray-400);
    background: var(--color-gray-400);
    color: var(--color-gray-500);
    cursor: not-allowed;
}

.button.flat.button-outline {
    background: var(--color-surface-base);
    color: var(--color-gray-700);
}

.button.flat.button-outline:hover {
    background: var(--color-accent-tint-hover);
}

.button.flat.button-outline:active {
    background: var(--color-accent-tint-active);
}

.button.flat.button-outline:disabled {
    border-color: var(--color-gray-400);
    background: var(--color-surface-base);
    color: var(--color-gray-500);
}

.button.flat.button-neutral {
    border-color: var(--color-border-interactive);
    background: var(--color-surface-base);
    color: var(--color-gray-800);
}

.button.flat.button-neutral:hover {
    background: var(--color-gray-100);
}

.button.flat.button-neutral:active {
    background: var(--color-gray-200);
}

.button.flat.button-neutral:disabled {
    border-color: var(--color-gray-400);
    background: var(--color-surface-base);
    color: var(--color-gray-600);
}

.button.flat.button-text {
    border-color: transparent;
    background: transparent;
    color: var(--color-gray-700);
}

.button.flat.button-text:hover {
    background: var(--color-gray-100);
}

.button.flat.button-text:active {
    background: var(--color-gray-200);
}

.button.flat.button-text:disabled {
    border-color: transparent;
    background: transparent;
    color: var(--color-gray-500);
}

.button.flat.compact {
    padding: var(--space-1) var(--space-3);
    font-weight: var(--text-backend-body-weight);
}

.button.flat:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Reuse the public profile card's favorite control and custom icon. */
.businesscard-button > button.businesscard-collect,
.businesscard-button > button.businesscard-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    margin: 0;
    padding: 0;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--icon-size-action);
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    box-shadow: none;
    transition: border-color var(--transition-duration) var(--transition-easing);
}

.businesscard-button > button.businesscard-collect:hover,
.businesscard-button > button.businesscard-share:hover {
    border-color: var(--color-accent);
}

.businesscard-button > button.businesscard-collect:focus-visible,
.businesscard-button > button.businesscard-share:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.businesscard-button > button.businesscard-collect:disabled,
.businesscard-button > button.businesscard-share:disabled {
    color: var(--color-gray-500);
    cursor: not-allowed;
}