special-pages/pages/onboarding/app/components/Buttons.module.css
.buttons {
    display: flex;
    gap: 8px;

    flex-direction: row;
    flex-wrap: wrap;
}

/* Shared buttons */
.button {
    --btn-line-height: 11px;
    --btn-line-height-large: 1;
    --btn-line-height-xl: 1;

    --btn-font-size: 11px;
    --btn-font-size-large: 13px;
    --btn-font-size-xl: 15px;

    --btn-height: 24px;
    --btn-height-large: 32px;
    --btn-height-xl: 40px;

    [data-platform="windows"] & {
        --btn-font-size: 11px;
        --btn-font-size-large: 13px;
        --btn-font-size-xl: 14px;
    }

    border: none;
    outline: none;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;

    border-radius: 6px;

    font-style: normal;
    font-weight: 600;
    /* identical to box height, or 100% */
    letter-spacing: 0.06px;

    white-space: nowrap;

    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    height: var(--btn-height);

    padding: 8px 12px;

    color: white;

    &[disabled] {
        opacity: 0.6;
    }

    &[aria-expanded="true"] {
        background: rgba(0, 0, 0, 0.03);
    }
}

.large {
    padding: 12px 32px;
    font-size: var(--btn-font-size-large);
    line-height: var(--btn-line-height-large);
    height: var(--btn-height-large);
}

.xl {
    padding: 12px 32px;
    line-height: var(--btn-line-height-xl);
    font-size: var(--btn-font-size-xl);
    height: var(--btn-height-xl);
}


.secondary {
    background: rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.09);
    color: var(--ddg-color-primary);
    min-width: 80px;

    @media (prefers-color-scheme: dark) {
        border-color: var(--color-white-at-12);
        background: var(--color-white-at-3);
        color: #7295F6
    }
}
.secondary:hover {
    background: rgba(0, 0, 0, 0.03);
}

.secondary:active {
    background: rgba(0, 0, 0, 0.06);
}

.primary {
    background:
        radial-gradient(70.96% 100% at 49.83% 0%, rgba(107, 78, 186, 0) 39.72%, rgba(107, 78, 186, 0.24) 100%),
        var(--ddg-color-primary);
    box-shadow:
        0px 4px 6px rgba(64, 38, 115, 0.16),
        0px 6px 16px rgba(38, 64, 115, 0.16),
        inset 0px 1px 0px rgba(255, 255, 255, 0.32);
    min-width: 116px;
}

.primary:hover {
    background: radial-gradient(
            70.96% 100% at 49.83% 0%,
            rgba(107, 78, 186, 0) 39.72%,
            rgba(107, 78, 186, 0.4) 100%
    ),
    #2b55ca;
}
.primary:active {
    background: radial-gradient(
            70.96% 100% at 49.83% 0%,
            rgba(107, 78, 186, 0) 39.72%,
            rgba(107, 78, 186, 0.24) 100%
    ),
    #1e42a4;
}
