special-pages/shared/components/Button/Button.module.css
.button {
    appearance: none;
    background: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    position: relative;
}

/* macOS Base Style */
[data-platform-name="macos"] .button {
    border: 0;
    border-radius: calc(5 * var(--px-in-rem));
    box-shadow: var(--button-shadow);
    font-size: calc(13 * var(--px-in-rem));
    height: var(--sp-5);
    opacity: var(--button-opacity);
    padding: 0 var(--sp-3);

    &.lg {
        height: var(--sp-7);
        border-radius: calc(6 * var(--px-in-rem));
    }

    &.xl {
        height: var(--sp-8);
        border-radius: calc(6 * var(--px-in-rem));
    }

    &:disabled {
        background: var(--button-bg--disabled, var(--button-bg));
        box-shadow: var(--button-shadow--disabled, var(--button-shadow));
        color: var(--button-text--disabled, var(--button-text));
        opacity: var(--button-opacity--disabled, var(--button-opacity));

        &:hover {
            background: var(--button-bg--disabled, var(--button-bg));
            box-shadow: var(--button-shadow--disabled, var(--button-shadow));
            color: var(--button-text--disabled, var(--button-text));
            opacity: var(--button-opacity--disabled, var(--button-opacity));
        }
    }

    &:focus,
    &:focus-visible {
        background: var(--button-bg--focus, var(--button-bg));
        box-shadow: var(--button-shadow--focus, var(--button-shadow));
        color: var(--button-text--focus, var(--button-text));
        opacity: var(--button-opacity--focus, var(--button-opacity));
    }

    &:hover {
        background: var(--button-bg);
        box-shadow: var(--button-shadow--hover, var(--button-shadow));
        color: var(--button-text--hover, var(--button-text));
        opacity: var(--button-opacity--hover, var(--button-opacity));
    }

    &:active {
        background: var(--button-bg--active, var(--button-bg));
        box-shadow: var(--button-shadow--active, var(--button-shadow));
        color: var(--button-text--active, var(--button-text));
        opacity: var(--button-opacity--active, var(--button-opacity));
    }
}

/* iOS Base Style */
[data-platform-name="ios"] .button {
    border-radius: var(--sp-2);
    border: 0;
    font-size: calc(15 * var(--px-in-rem));
    font-weight: 600;
    height: calc(50 * var(--px-in-rem));
    letter-spacing: calc(-0.23 * var(--px-in-rem));
    padding: 0 var(--sp-6);
    text-align: center;

    &:active {
        background: var(--button-bg--active, var(--button-bg));
        color: var(--button-text--active, var(--button-text));
    }

    &:disabled {
        background: var(--button-bg--disabled, var(--button-bg));
        color: var(--button-text--disabled, var(--button-text));
    }
}

/* Backward-compatible styles for use when no platform info available */
body:not([data-platform-name]) {
    & .button {
        background-blend-mode: normal, color-burn, normal;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 100%), #007aff;

        border-radius: var(--sp-2);
        border: 1px solid rgba(40, 145, 255, 0.05);
        box-shadow: 0 0 1px 0 rgba(40, 145, 255, 0.05), 0 1px 1px 0 rgba(40, 145, 255, 0.1);
        color: white;
        font-size: calc(13 * var(--px-in-rem));
        font-weight: 600;
        line-height: var(--sp-8);
        padding: 0 var(--sp-4);

        &:hover {
            background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749db;
        }

        &:active {
            background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #1743d1;
        }
    }
}

/* macOs Design System Button Tokens */
[data-platform-name="macos"] {
    /* Shared among all variants */
    --macos-control-focused-shadow: 0 0 0 3px rgba(57, 105, 239, 0.55), 0 0 0 1px rgba(57, 105, 239, 0.55) inset, 0 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.1);

    /* Standard button variant */
    --macos-control-standard-background-rest: var(--color-white);
    --macos-control-standard-background-rest--dark: rgba(255, 255, 255, 0.28);
    --macos-control-standard-background-pressed: #e7e7e7;
    --macos-control-standard-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.2);

    /* Accent Branded variant */
    --macos-control-accent-branded-background-rest: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB;
    --macos-control-accent-branded-background-pressed: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2140C0;
    --macos-control-accent-branded-background-hover: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB;
    --macos-control-accent-branded-background-disabled: var(--color-white);
    --macos-control-accent-branded-background-focus: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB;

    --macos-control-accent-branded-shadow-rest: 0 1px 0 0 rgba(255, 255, 255, 0) inset, 0 1px 0 0 rgba(255, 255, 255, 0) inset, 0 0 0 1px rgba(0, 122, 255, 0.05), 0 0 1px 0 rgba(0, 122, 255, 0.05), 0 1px 1px 0 rgba(0, 122, 255, 0.1);
    --macos-control-accent-branded-shadow-pressed: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 0px 0px 0.5px rgba(0, 122, 255, 0.05), 0px 0px 1px 0px rgba(0, 122, 255, 0.05), 0px 1px 1px 0px rgba(0, 122, 255, 0.10);
    --macos-control-accent-branded-shadow-hover: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 0px 0px 0.5px rgba(0, 122, 255, 0.05), 0px 0px 1px 0px rgba(0, 122, 255, 0.05), 0px 1px 1px 0px rgba(0, 122, 255, 0.10);
    --macos-control-accent-branded-shadow-disabled: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.20);
}

/* macOS Variables */
[data-platform-name="macos"] .button {
    &.standard {
        --button-bg: var(--macos-control-standard-background-rest);
        --button-text: var(--macos-text-primary);
        --button-shadow: var(--macos-control-standard-shadow);
        --button-opacity: 1;

        /* Active */
        --button-bg--active: var(--macos-control-standard-background-pressed);

        /* Disabled */
        --button-bg--disabled: var(--macos-control-standard-background-rest);
        --button-text--disabled: var(--macos-text-primary);
        --button-shadow--disabled: var(--macos-control-standard-shadow);
        --button-opacity--disabled: 0.4;

        /* Focus */
        --button-shadow--focus: var(--macos-control-focused-shadow);

        /* Hover */
        /* TODO: No difference on hover according to Figma(?) */
    }

    &.accent,
    &.accentBrand {
        --button-bg: var(--macos-control-accent-branded-background-rest);
        --button-text: var(--color-white);
        --button-shadow: var(--macos-control-accent-branded-shadow-rest);
        --button-opacity: 1;

        /* Active */
        --button-bg--active: var(--macos-control-accent-branded-background-pressed);
        --button-text--active: var(--color-white-at-80);
        --button-shadow--active: var(--macos-control-accent-branded-shadow-pressed);

        /* Disabled */
        --button-bg--disabled: var(--macos-control-standard-background-rest);
        --button-text--disabled: var(--macos-text-primary);
        --button-shadow--disabled: var(--macos-control-standard-shadow);
        --button-opacity--disabled: 0.4;

        /* Focus */
        --button-bg--focus: var(--macos-control-accent-branded-background-focus);
        --button-text--focus: var(--color-white);
        --button-shadow--focus: var(--macos-control-focused-shadow);

        /* Hover */
        --button-bg--hover: var(--macos-control-accent-branded-background-hover);
        --button-text--hover: var(--color-white);
        --button-shadow--hover: var(--macos-control-accent-branded-shadow-hover);
    }

    [data-theme=dark] & {
        &.standard {
            --button-bg: var(--macos-control-standard-background-rest--dark);
            --button-text: var(--color-white-at-84);
        }

        /** TODO: Confirm that colors don't change in Dark Mode for accented macOS button */
    }
}

/* iOS Variables */
[data-platform-name="ios"] .button {
    &.primary {
        --button-bg: var(--color-blue-50);
        --button-text: var(--color-white);

        /* Active */
        --button-bg--active: var(--color-blue-70);
        --button-text--active: var(--color-white);

        /* Disabled */
        --button-bg--disabled: var(--color-black-at-6);
        --button-text--disabled: var(--color-black-at-36);
    }

    &.ghost {
        --button-bg: transparent;
        --button-text: var(--color-blue-50);

        /* Active */
        --button-bg--active: rgba(57, 105, 239, 0.12);
        --button-text--active: var(--color-blue-70);

        /* Disabled */
        --button-bg--disabled: transparent;
        --button-text--disabled: var(--color-black-at-36);
    }


    [data-theme=dark] & {
        &.primary {
            --button-bg: var(--color-blue-30);
            --button-text: var(--color-black-at-84);

            /* Active */
            --button-bg--active: var(--color-blue-50);
            --button-text--active: var(--color-black-at-84);

            /* Disabled */
            --button-bg--disabled: var(--color-black-at-6);
            --button-text--disabled: var(--color-black-at-36);
        }

        &.ghost {
            --button-bg: transparent;
            --button-text: var(--color-blue-30);

            /* Active */
            --button-bg--active: rgba(114, 149, 246, 0.2);
            --button-text--active: var(--color-blue-20);

            /* Disabled */
            --button-bg--disabled: transparent;
            --button-text--disabled: var(--color-black-at-36);
        }
    }
}

/* Windows Implementation */
[data-platform-name="windows"] {
    .button {
        /* this is the focus ring used on NTP widgets */
        --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--color-black);

        border-radius: var(--border-radius-sm);
        height: var(--sp-8);
        border-width: 0;
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);

        &:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        &.standard {
            background-color: var(--color-black-at-6);
            border-width: 0;

            &:hover {
                background-color: var(--color-black-at-9);
                cursor: pointer;
            }

            &:active {
                background-color: var(--color-black-at-12);
            }

            &:disabled {
                color: var(--color-black-at-84);
            }

            &:disabled:hover {
                cursor: not-allowed;
                background-color: var(--color-white-at-6);
            }
        }

        &.accentBrand {
            background-color: var(--ddg-color-primary);
            color: var(--color-white);

            &:hover {
                background-color: var(--color-blue-60);
            }

            &:active {
                background-color: var(--color-blue-70);
            }
        }

        [data-theme=dark] & {
            --focus-ring: 0px 0px 0px 1px var(--color-black), 0px 0px 0px 3px var(--color-white);

            &.standard {
                color: var(--color-white-at-84);
                background-color: var(--color-white-at-12);

                &:hover {
                    background-color: var(--color-white-at-18);
                }

                &:active {
                    background-color: var(--color-white-at-24);
                }

                &:disabled {
                    color: var(--color-white-at-12);
                    opacity: 0.8;
                }

                &:disabled:hover {
                    background-color: var(--color-white-at-12);
                }
            }

            &.accentBrand {
                color: var(--color-black-at-84);
                background-color: var(--color-blue-20);

                &:hover {
                    background-color: var(--color-blue-30);
                }

                &:active {
                    background-color: var(--color-blue-40);
                }

                &:disabled {
                    background-color: var(--color-white-at-36);
                    color: var(--color-black-at-84);
                }
            }
        }
    }
}
