_download-button.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;

// download button and related containers
ul.download-list {
    list-style-type: none;
    margin-bottom: 10px;

    li {
        margin-left: 0;
    }

    strong {
        font-weight: bold;
    }
}

.download-dumb {
    ul {
        list-style: none;

        li {
            display: inline-block;
            margin: 20px 0 0;

            .button {
                @include text-body-sm;
                margin-left: 3px;
                padding: 6px 10px;
            }
        }
    }
}

.download-other {
    @include text-body-xs;
    color: #666;

    a:link,
    a:visited {
        color: #999;
    }

    a:hover,
    a:focus,
    a:active {
        color: #999;
        text-decoration: underline;
    }
}

/* !important used for strict download link enforcement */
/* stylelint-disable declaration-no-important, selector-class-pattern  */

// Product download buttons
.download-button {
    display: inline-block;
    vertical-align: top;

    .ios-download,
    .unrecognized-download,
    .nojs-download {
        display: none;
    }
}

// OS detection
.download-button .os_win64,
.download-button .os_win64-msi,
.download-button .os_win64-aarch64,
.download-button .os_linux,
.download-button .os_linux64,
.download-button .os_linux64-aarch64,
.android .download-button-desktop,
.download-button .os_win,
.download-button .os_win-msi,
.download-button .os_osx,
.download-button .os_android,
.download-button .os_ios,
.no-js .download-list,
.other .download-list {
    display: none !important;
}

.linux .download-button .os_linux,
.linux .download-button .os_linux64,
.linux .download-button .os_linux64-aarch64,
.windows .download-button .os_win,
.osx .download-button .os_osx,
.android .download-button .os_android,
.download-button-android .os_android,
.android .download-button-desktop .download-list,
.download-button-ios .os_ios,
.ios .download-button .os_ios,
.ios .download-button .ios-download,
.ios .download-button-desktop .download-list,
.other .download-button-android .download-list {
    display: block !important;
}

.windows .force-win64 .os_win,
.windows .force-win64-aarch64 .os_win {
    display: none !important;
}

.windows .force-win64 .os_win64 {
    display: block !important;
}

.windows .force-win64-aarch64 .os_win64-aarch64 {
    display: block !important;
}

// add spacing between displayed buttons
.download-list {
    display: grid;
    gap: $spacing-md;
}

// 64-bit UA detection for Firefox Beta on Windows (issue #10194)
.windows.x64 .download-button-beta .os_win {
    display: none !important;
}

.windows.x64 .download-button-beta .os_win64 {
    display: block !important;
}

.download-list .linux {
    margin-bottom: $spacing-md;
}

// Platform specific Firefox download macros (bedrock issue #12192)
.firefox-platform-button {
    .download-link.os_linux64 {
        margin-bottom: $spacing-sm; // allow spacing between macro Linux buttons ('download-list' buttons get spacing from grid)
    }

    .linux & {
        .download-link.os_linux64,
        .download-link.os_linux64-aarch64 {
            display: inline-block;
        }
    }

    .c-linux-debian {
        margin-top: $spacing-md;

        br {
            display: none;
        }

        @media #{$mq-md} {
            br {
                display: inline;
            }
        }
    }
}

// All linux download links (issue 648)
.linux {
    .download-link {
        text-wrap: balance; // TODO: update with https://github.com/mozilla/protocol/issues/1119
    }
}

// Conditional Firefox download buttons on unsupported
// operating system versions (issue #13317)
.fx-unsupported-message {
    display: none !important;
    text-align: center;

    .fx-unsupported-message-all-link {
        @include text-body-xs;
        display: block;
        margin-top: $spacing-md;

        a:link,
        a:visited {
            color: inherit;
            text-decoration: none;
        }

        a:hover,
        a:active,
        a:focus {
            text-decoration: underline;
        }
    }

    .download-link {
        text-align: center;
    }
}

// Split component styling
.fx-unsupported .mzp-c-split {
    .fx-unsupported-message,
    .fx-privacy-link,
    .mzp-c-button-download-privacy-link {
        @include bidi(((text-align, left, right),));
    }
}

.fx-unsupported .mzp-c-split.mzp-l-split-center-on-sm-md {
    .fx-unsupported-message,
    .fx-privacy-link,
    .mzp-c-button-download-privacy-link {
        text-align: center;
    }

    @media #{$mq-md} {
        .fx-unsupported-message,
        .fx-privacy-link,
        .mzp-c-button-download-privacy-link {
            @include bidi(((text-align, left, right),));
        }
    }
}

// Callout styling
.fx-unsupported .mzp-c-callout-compact {
    .fx-unsupported-message,
    .fx-privacy-link,
    .mzp-c-button-download-privacy-link {
        @include bidi(((text-align, left, right),));
    }
}

.windows.fx-unsupported,
.osx.fx-unsupported {
    // Hide Firefox desktop download buttons
    .c-button-download-thanks-link,
    .download-button .download-list {
        display: none !important;
    }

    // Keep showing Firefox mobile download buttons
    .download-button-android .download-list,
    .download-button-ios .download-list {
        display: block !important;
    }

    // Hide Firefox download button in the navigation as there's
    // too little space to display messaging.
    .c-navigation .c-navigation-shoulder .c-button-download-thanks {
        display: none !important;
    }

    // Hide Firefox Win64 ESR download button by default.
    .fx-unsupported-message.win .download-link.os_win64 {
        display: none !important;
    }
}

.windows.fx-unsupported {
    // Show unsupported message with Firefox ESR download button.
    .download-button .fx-unsupported-message.win,
    .c-button-download-thanks .fx-unsupported-message.win,
    .firefox-platform-button-windows .fx-unsupported-message.win {
        display: block !important;
    }

    // Show Firefox Win32 ESR download buttons for 64-bit CPUs.
    .fx-unsupported-message.win .download-link.os_win {
        display: inline-block !important;
    }

    // Hide Windows platform specific buttons.
    .firefox-platform-button-windows .firefox-platform-button {
        display: none;
    }

    &.x64 {
        // Show Firefox Win64 ESR download buttons for 64-bit CPUs.
        .fx-unsupported-message.win .download-link.os_win64 {
            display: inline-block !important;
        }

        // Hide Firefox Win32 ESR download buttons for 64-bit CPUs.
        .fx-unsupported-message.win .download-link.os_win {
            display: none !important;
        }
    }
}

.osx.fx-unsupported {
    // Show unsupported message with Firefox ESR download button.
    .download-button .fx-unsupported-message.mac,
    .c-button-download-thanks .fx-unsupported-message.mac,
    .firefox-platform-button-mac .fx-unsupported-message.mac {
        display: block !important;
    }

    // Hide Mac platform specific buttons.
    .firefox-platform-button-mac .firefox-platform-button {
        display: none;
    }
}

.android .download-button-desktop,
.ios .download-button-desktop,
.no-js .download-button {
    .nojs-download {
        display: block;
    }
}

.other .download-button {
    .unrecognized-download {
        display: block;
    }
}

/* stylelint-enable */

/* Microsoft Store badge */
.download-ms-store-badge {
    display: inline-block;

    .ms-store-badge-img {
        margin: 0
    }
}

// Download Icon
// Hack to ensure only component authored margin is applied
// https://github.com/mozmeao/springfield/pull/238#issuecomment-2954261185
.download-link .mzp-c-button-icon-end img {
    /* stylelint-disable-next-line declaration-no-important */
    margin-bottom: 0 !important;
}