media/css/firefox/new/desktop/download.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 'sass:math';

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
@import '~@mozilla-protocol/core/protocol/css/components/zap';
@import '../../../protocol/components/sub-navigation';

// --------------------------------------------------------------------------
// Protocol over-rides
// https://github.com/mozilla/protocol/issues/345
// https://github.com/mozilla/protocol/issues/536
// https://github.com/mozilla/bedrock/pull/9096


// xs
$v-grid-xs: $layout-md;
$h-grid-xs: $layout-xs;

// md
$v-grid-md: $layout-xl * 0.5;
$h-grid-md: 64px;

// lg
$v-grid-lg: 192px * 0.5;
$h-grid-lg: 80px;

main {
    background-color: $color-white; // for IE6
    color: $color-dark-gray-30;

    h2,
    h3,
    h4 {
        color: $color-marketing-gray-99;
        margin-bottom: $spacing-md;
    }

    img {
        .mzp-c-card & {
            display: block;
            margin-bottom: $spacing-lg;
        }
    }
}

// notification

.mzp-c-notification-bar {
    a:link {
        margin: 0;
    }
}

// emphasis box

.mzp-c-emphasis-box {
    padding-left: $h-grid-xs;
    padding-right: $h-grid-xs;

    @media #{$mq-md} {
        padding-left: $h-grid-md;
        padding-right: $h-grid-md;
    }

    @media #{$mq-md} {
        padding-left: $h-grid-lg;
        padding-right: $h-grid-lg;
    }
}

// button container

.mzp-c-button-download-container {
    .main-download & { // target main to avoid conflicting with nav
        margin-bottom: 0;
    }

    .t-intro & {
        @include bidi(((text-align, left, right),));
    }

    .t-features &,
    .t-discover & {
        display: block;
    }
}

// cta link

button.mzp-c-cta-link {
    background: none;
    border: 0;
    color: $color-link;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;

    &:hover {
        color: $color-link-hover;
    }
}

// cards
// https://github.com/mozilla/protocol/issues/536
// https://github.com/mozilla/bedrock/pull/9096

.mzp-c-card {
    background-color: transparent;
    margin-bottom: $v-grid-xs;

    @media #{$mq-md} {
        margin-bottom: $v-grid-md;
    }

    @media #{$mq-lg} {
        margin-bottom: $v-grid-lg;
    }

    .t-discover & {
        margin-bottom: $layout-xl;
    }
}

.mzp-l-card-third {
    margin: 0 auto;
    max-width: $content-lg;

    .mzp-c-card {
        @media #{$mq-sm} {
            @include bidi((
                (margin-left, 0, $h-grid-xs),
                (margin-right, $h-grid-xs, 0),
            ));
            width: calc(50% - (#{$h-grid-xs} * 0.5));

            &:nth-child(even) {
                margin-left: 0;
                margin-right: 0;
            }
        }

        @media #{$mq-md} {
            @include bidi((
                (margin-left, 0, $h-grid-md),
                (margin-right, $h-grid-md, 0),
            ));
            width: calc(50% - (#{$h-grid-md} * 0.5));

            &:nth-child(even) {
                margin-left: 0;
                margin-right: 0;
            }
        }

        @media #{$mq-lg} {
            width: calc(33.3% - (#{$h-grid-lg} - #{math.div($h-grid-lg, 3)}));

            &:nth-child(even) {
                @include bidi((
                    (margin-left, 0, $h-grid-lg),
                    (margin-right, $h-grid-lg, 0),
                ));
            }

            &:nth-child(3n) {
                @include bidi(((margin-right, 0, margin-left, 0),));
            }
        }
    }
}

.mzp-l-card-half {
    .mzp-c-card {
        max-width: 100%;

        @media #{$mq-sm} {
            @include bidi((
                (margin-left, 0, $h-grid-xs),
                (margin-right, $h-grid-xs, 0),
            ));
            width: calc(50% - (#{$h-grid-xs} - (#{$h-grid-xs} * 0.5)));

            main &:nth-child(2n) { // bump the specificity so later media queries don't over write it
                margin-left: 0;
                margin-right: 0;
            }
        }

        @media #{$mq-md} {
            @include bidi((
                (margin-left, 0, $h-grid-md),
                (margin-right, $h-grid-md, 0),
            ));
            width: calc(50% - (#{$h-grid-md} - (#{$h-grid-md} * 0.5)));
        }

        @media #{$mq-lg} {
            @include bidi((
                (float, left, right),
                (margin-left, 0, $h-grid-lg),
                (margin-right, $h-grid-lg, 0),
            ));
            width: calc(50% - (#{$h-grid-lg} - (#{$h-grid-lg} * 0.5)));

            &:nth-child(2n+1) {
                @include bidi(((clear, left, right),));
            }
        }
    }
}

// --------------------------------------------------------------------------
// conditional content classes

.show-android,
.show-ios {
    display: none !important; /* stylelint-disable-line declaration-no-important */
}

.ios .show-ios {
    display: block !important; /* stylelint-disable-line declaration-no-important */
}

.android .show-android {
    display: block !important; /* stylelint-disable-line declaration-no-important */
}

.ios,
.android {
    #download-features,
    #download-discover {
        display: none;
    }
}

.show-else {
    .android &,
    .ios & {
        display: none !important; /* stylelint-disable-line declaration-no-important */
    }
}

// --------------------------------------------------------------------------

.u-visually-hidden {
    @include visually-hidden;
}

// --------------------------------------------------------------------------
// section titles

.mzp-c-section-heading {
    @include text-title-md;
}

// --------------------------------------------------------------------------
// trio
// different from card row of 3 because of behaviour at mq-md

.c-trio {
    @include clearfix;
    margin: 0 auto;

    li {
        margin-bottom: $layout-lg;

        .t-custom &:last-child {
            margin-bottom: 0;
        }
    }

    img {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    p {
        margin-bottom: 0;
    }

    @media #{$mq-md} {
        img {
            float: left;
            margin-left: 0;
            margin-right: $layout-sm;
        }
    }

    @media #{$mq-lg} {
        max-width: $content-lg;

        li {
            float: left;
            width: calc(33.3% - (#{$h-grid-lg} - #{math.div($h-grid-lg, 3)}));

            &:nth-child(2n) {
                margin-left: $h-grid-lg;
                margin-right: $h-grid-lg;
            }

            .t-custom & {
                margin-bottom: 0;
            }
        }

        img {
            float: none;
        }
    }
}

// --------------------------------------------------------------------------
// Blocks
// used for highlights, hero, and mobile

.c-block {
    margin: 0 auto;
    overflow-x: hidden;
    padding: $v-grid-xs 0;
    position: relative;

    @media #{$mq-md} {
        padding: $v-grid-md 0;
    }

    @media #{$mq-lg} {
        padding: $v-grid-lg 0;
    }
}

.c-block-container {
    @include clearfix;
    @include border-box;
    margin: 0 auto;
    max-width: $content-xl + $layout-xl * 2;
    min-width: $content-xs;
    padding: 0 $layout-sm;

    .c-block-media-img {
        margin: 0 auto;
    }

    @media #{$mq-lg} {
        padding: 0 $layout-xl;
    }

    // vertical and horizontal aligment for body or media
    // text align works for float fallback
    // justify positioning works for no constraint
    // absolute positioning works on constrain-height
    @media #{$mq-md} {
        padding: 0 $layout-lg;

        .l-h-start {
            @include bidi(((text-align, left, right),));
            justify-self: start;

            .c-block-media-img {
                @include bidi((
                    (margin-right, auto, margin-left, 0),
                    (margin-left, 0, margin-right, 0),
                ));
            }
        }

        .l-h-center {
            justify-self: center;
            text-align: center;

            .c-block-media-img {
                margin: 0 auto;
            }

            @supports (display:grid) {
                &.l-media-constrain-height .c-block-media-img {
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        .l-h-end {
            justify-self: end;

            .c-block-media-img {
                @include bidi((
                    (margin-left, auto, margin-right, 0),
                    (margin-right, 0, margin-left, 0),
                ));
            }

            @supports (display:grid) {
                &.l-media-constrain-height .c-block-media-img {
                    right: 0;
                    left: auto;
                }
            }
        }
    }

    // vertical alignment only browsers with grid support
    @supports (display:grid) {
        .l-v-start {
            align-self: start;
        }

        .l-v-center {
            align-self: center;

            &.l-media-constrain-height .c-block-media-img {
                top: 50%;
                transform: translateY(-50%);
            }

            &.l-h-center.l-media-constrain-height .c-block-media-img {
                transform: translateY(-50%) translateX(-50%);
            }
        }

        .l-v-end {
            align-self: end;

            &.l-media-constrain-height .c-block-media-img {
                top: auto;
            }
        }
    }
}

.c-block-media-img {
    display: block;
}

.c-block-body {
    position: relative;

    // vertical spacing between body and media before side by side display kicks in
    @media all and (max-width: #{$screen-md - 1}) {
        &:first-child {
            margin-bottom: $v-grid-xs;
        }

        &:last-child {
            margin-top: $v-grid-xs;
        }

        .mzp-has-media-hide-on-sm & {
            margin-bottom: 0;
            margin-top: 0;
        }
    }
}

.c-block-media {
    position: relative;

    @media (max-width: #{$content-md - 1px}) {
        .mzp-has-media-hide-on-sm & {
            display: none;
        }
    }

    // constraints on height or width of media
    @media all and (max-width: #{$screen-md - 1}) {
        // center image & constrain width
        &.l-media-constrain-on-sm {
            text-align: center;

            .c-block-media-img {
                margin: 0 auto;
                width: $content-sm;
            }
        }
    }

    @media #{$mq-md} {
        @supports ( display:grid ) {
            &.l-media-constrain-height {
                height: 100%;
                justify-self: auto !important; /* stylelint-disable-line declaration-no-important */

                .c-block-media-img {
                    bottom: 0;
                    left: 0;
                    max-height: 100%;
                    max-width: auto;
                    position: absolute;
                    top: 0;
                    width: auto;

                    [dir='rtl'] &,
                    .l-reversed & {
                        left: auto;
                        right: 0;
                    }
                }
            }
        }
    }
}

// --------------------------------------
// side by side layout, float based fall back

@media #{$mq-md} {
    .c-block-body {
        @include border-box;
        @include bidi(((float, left, right),));
        width: 50%;
        padding: 0 ($h-grid-lg * 0.5);

        > *:first-child {
            margin-top: 0;
        }

        > *:last-child {
            margin-bottom: 0;
        }

        .l-reversed & {
            @include bidi(((float, right, left),));
        }
    }

    .c-block-media {
        @include border-box;
        @include bidi(((float, right, left),));
        width: 50%;
        padding: 0 ($h-grid-lg * 0.5);

        .l-reversed & {
            @include bidi(((float, left, right),));
        }
    }
}

// --------------------------------------
// side by side layout, grid based

@media #{$mq-md} {
    @supports (display:grid) {
        .c-block-container {
            // grid is all start/end based we don't need bidi declarations for RTL support \o/
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas: 'body media';
            grid-column-gap: $h-grid-lg;

            .l-reversed > & {
                grid-template-areas: 'media body';
            }
        }

        .c-block-body,
        .c-block-media {
            .c-block-container & { // extra specificitly to over-ride the styles that make the float fall-back work
                float: none;
                min-width: 0; // because of https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items
                padding: 0;
                width: auto;
            }
        }

        .c-block-body {
            grid-area: body;
        }

        .c-block-media {
            align-self: stretch;
            grid-area: media;

            .c-block-media-img {
                display: block;
                max-width: none;
            }
        }
    }
}

// --------------------------------------------------------------------------
// intro banner

.t-intro {
    &.c-block {
        @include text-body-md;
        padding-top: $layout-sm;

        @media #{$mq-lg} {
            @include text-body-lg;
            padding-top: $layout-lg;
        }
    }

    .c-block-container {
        max-width: $content-xl + $layout-xl * 2;
    }

    .c-block-body > p {
        margin-bottom: $v-grid-md;
    }

    [lang='ar'] & h2 {
        @include font-size(40px);
    }

    .mzp-c-wordmark {
        margin-bottom: $v-grid-md;
    }

    // issue 13317
    .fx-unsupported-message {
        @include bidi(((text-align, left, right),));
    }
}

.c-intro-download-alt {
    @include text-body-xs;
    color: $color-dark-gray-30;
    display: block;
    margin-top: $spacing-md;

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

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

// --------------------------------------
// noodles

.c-noodles {
    left: 0;
    position: relative;
    top: 0;

    .t-intro & {
        height: 536px; // height of the image plus padding
        left: 30px;
        width: 537px; // width of image
    }
}

.noodle-browser {
    background-color: $color-light-gray-10;
    border-radius: 4px;
    box-shadow: $box-shadow-md;
    height: 371px;
    left: -30px;
    max-width: none;
    position: absolute;
    top: 100px;
    width: 514px;
}

// animated shapes

.noodle-pill {
    border: 1px solid transparent;
    border-radius: 500px;
    position: absolute;
}

.noodle-svg {
    animation: curl 10s infinite alternate;
    position: absolute;
    transform-origin: top right;
}

.noodle-circle {
    animation: round 9s infinite linear;
    border-radius: 100%;
    border: 1px solid transparent;
    height: 20px;
    left: 296px;
    position: absolute;
    top: 40px;
    transform-origin: 5px;
    width: 20px;
}

.noodle-circle.t-fill-orange,
.noodle-circle.t-fill-yellow-orange {
    animation-duration: 10s;
    animation-delay: -3s;
    height: 165px;
    left: 135px;
    top: 342px;
    transform-origin: 80px 80px;
    width: 165px;
}

.noodle-pill.t-outline-pink {
    animation: pill 7s infinite alternate;
    animation-delay: -5s;
    height: 145px;
    top: 320px;
    transform: rotate(-34deg);
    width: 348px;
}

.noodle-pill.t-fill-blue {
    animation: pill 7s infinite alternate;
    height: 145px;
    left: 100px;
    top: 120px;
    transform: rotate(-34deg);
    width: 370px;
}

@media screen and (prefers-reduced-motion: reduce) {
    .noodle-pill,
    .noodle-circle,
    .noodle-svg {
        animation: none;
    }
}

@keyframes round {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pill {
    from {
        transform: rotate(-34deg) translate(7px, 0);
    }

    to {
        transform: rotate(-34deg) translate(-7px, 0);
    }
}

@keyframes curl {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-2deg);
    }
}

// colours

.t-outline-pink {
    border-color: #ff008b;
}

.t-fill-pink-yellow {
    background: linear-gradient(to left, #ff4ca1, #ffde67);
}

.t-fill-yellow-orange {
    background: linear-gradient(to left, #ffde67, #ff671e);
}

.t-fill-blue {
    background: linear-gradient(to left, #00e1ff, #005fe7);
}

.t-outline-yellow {
    border-color: #ffa437;
}

// --------------------------------------------------------------------------
// releases

.t-releases {
    position: relative;
    max-width: $content-xl + $layout-xl * 2;

    &::before {
        background-image: url('/media/img/firefox/new/desktop/release-noodles.svg');
        content: '';
        display: block;
        height: 212px;
        left: 0;
        position: absolute;
        top: 0;
        width: 287px;
        z-index: 0;
    }

    .mzp-c-emphasis-box {
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }

    .c-section-title {
        padding-top: $spacing-sm;
    }

    img {
        margin-bottom: $spacing-lg;
    }
}

.c-notes {
    margin-bottom: $layout-sm;
    text-align: center;
}

// --------------------------------------------------------------------------
// highlights
// includes t-compare, t-block, t-everone, and t-devices block components

.t-highlights {
    p {
        margin-bottom: $spacing-xl;
    }

    @supports (display:grid) {
        @media #{$mq-lg} {
            .c-block-body {
                max-width: ($content-lg - $h-grid-lg) * 0.5;
            }
        }
    }
}

// --------------------------------------

.t-compare {
    padding-top: 0;

    .mzp-c-emphasis-box {
        margin: 0 (-$layout-2xs);
        padding: $layout-2xs;

        @media #{$mq-sm} {
            margin: 0 auto;
            padding: $layout-sm;
        }
    }
}

.t-compare .c-block-media-img {
    @include bidi(((background-position, top left, top right),));
    background-image: url('/media/img/firefox/new/desktop/comparison-noodles-mr1.svg');
    background-repeat: no-repeat;
    background-size: contain;

    // IE 8 doesn't have the noodles, so don't push it down
    @media all and (min-width: 0) {
        padding: 65px 0 0;
    }

    @media #{$mq-md} {
        background-size: 600px;
        padding: 65px $layout-sm 0;
        width: 100%;
    }

    @media #{$mq-lg} {
        background-size: contain;
    }
}

.c-chart {
    margin: 0;
}

.c-compare-table {
    caption-side: bottom;
    background: $color-white;
    border-radius: $border-radius-md;
    box-shadow: $box-shadow-sm;
    border-collapse: separate;
    border: $spacing-xl solid $color-white;
    margin-left: auto;
    margin-right: auto;
    max-width: $content-lg;
    width: 100%;

    caption {
        display: table-caption;
    }

    thead {
        th {
            @include text-title-xs;
            border-bottom: 3px solid $color-marketing-gray-20;
            font-weight: bold;

            @media #{$mq-sm} {
                position: static;
            }

            img {
                @include text-body-xs;
                height: auto;
                max-height: 36px;
                max-width: 36px;
                min-width: 1rem;
                width: 100%;
            }
        }
    }

    th,
    td {
        @include text-body-sm;
        @include bidi((
            (border-left, 1px solid $color-marketing-gray-20, border-right, 0),
            (text-align, center, center), /* needs higher specificity for RTL*/
        ));
        border-top: 1px solid $color-marketing-gray-20;
        font-weight: normal;
        padding: $spacing-xs;

        &:first-child {
            @include bidi(((border-left-width, 0, border-right-width, 1px),));
            text-align: start;
        }

        @media #{$mq-sm} {
            padding: $spacing-sm;
        }
    }

    tbody {
        td {
            width: 64px; // need fixed width to avoid content moving when switching tabs
        }

        tr:nth-child(2n - 1) {
            background-color: $color-marketing-gray-10;
        }
    }

    tr > *:nth-child(1n+4) {
        // hide all columns after Chrome
        display: none;
    }
}

.c-compare-buttons {
    margin-top: $layout-sm;
    text-align: center;

    .no-js & {
        opacity: 0;
    }

    button {
        margin: 0;
    }
}

.c-compare-button {
    @include text-body-sm;
    background: transparent;
    border-bottom: 4px solid $color-marketing-gray-20;
    border-left: none;
    border-right: none;
    border-top: none;
    color: $color-dark-gray-30;
    cursor: pointer;
    padding: 0 $spacing-md $spacing-sm;

    &:focus {
        border-bottom-color: $color-link-hover;
        font-weight: bold;
        outline: none;
    }

    &[aria-pressed='true'] {
        border-bottom-color: $color-link;
        font-weight: bold;
    }
}

// --------------------------------------

#protection-report {
    display: none;

    .state-firefox-desktop-70 & {
        display: block;
    }
}

// --------------------------------------

.t-everyone {
    .c-block-media-img {
        width: 330px;

        @media #{$mq-lg} {
            width: auto;
        }
    }
}

// --------------------------------------

.t-devices .mobile-download-buttons li {
    display: inline-block;
    margin-right: $spacing-md;
}

// --------------------------------------------------------------------------

.t-features {
    background-color: $color-light-gray-10;
    background-repeat: no-repeat;
    background-position:
        80% 63%,
        top left,
        bottom 10% right,
        bottom left calc(50vw - 600px),
        bottom 30% left,
        top right;
    margin-bottom: $v-grid-xs;
    margin-top: $v-grid-xs;

    @media #{$mq-md} {
        margin-bottom: $v-grid-md;
        margin-top: $v-grid-md;
    }

    @media #{$mq-lg} {
        margin-bottom: $v-grid-lg;
        margin-top: $v-grid-lg;
    }

    .loaded & {
        background-image:
            url('/media/img/firefox/new/desktop/features/one.svg'),
            url('/media/img/firefox/new/desktop/features/two.svg'),
            url('/media/img/firefox/new/desktop/features/oval-one.svg'),
            url('/media/img/firefox/new/desktop/features/oval-two.svg'),
            url('/media/img/firefox/new/desktop/features/rect-one.svg'),
            url('/media/img/firefox/new/desktop/features/rect-two.svg');
    }

    img {
        margin-bottom: $spacing-lg;
    }

    .mzp-u-list-styled {
        @include bidi(((margin-left, $spacing-md, margin-right, 0),));
        margin-bottom: 0;
    }
}

// --------------------------------------------------------------------------
// customization

.c-screen {
    position: relative;
    text-align: center;
    margin-bottom: $layout-sm;
    margin-left: -$layout-xs;
    margin-right: -$layout-xs;

    @media #{$mq-md} {
        margin-left: -$layout-md;
        margin-right: -$layout-md;
    }

    svg {
        display: block;
        width: $content-xl;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}

.c-screenshot {
    @include bidi(((left, 0, right, auto),));
    @include border-box;
    margin: 0 auto;
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-left: $layout-xs;
    padding-right: $layout-xs;

    @media #{$mq-md} {
        padding-left: $layout-md;
        padding-right: $layout-md;
    }

    @media #{$mq-lg} {
        padding-left: $layout-xl;
        padding-right: $layout-xl;
    }

    img {
        display: block;
        margin: 0 auto;
        background-color: #303035;
        border-radius: 4px 4px 0 0;
        width: $content-lg;
    }
}

// --------------------------------------------------------------------------

.t-company {
    img {
        margin: 0 auto $spacing-xl;
        width: $content-xs;
    }

    p {
        margin-bottom: 0;
    }

    .mzp-c-card {
        &:last-child {
            margin-bottom: 0;
        }
    }

    // put the images under the text for supporting browsers
    @media all and (max-width: #{$screen-sm - 1}) {
        @supports (display: flex) {
            .mzp-c-card {
                @include flexbox;
                flex-direction: column;

                &:last-child img {
                    margin-bottom: 0;
                }
            }

            img {
                margin: $v-grid-xs auto;
                order: 10;
            }
        }
    }

    @media #{$mq-sm} {
        .mzp-c-card {
            margin-bottom: 0;
        }

        img {
            width: auto;
        }
    }
}

// --------------------------------------------------------------------------

.t-discover {
    img {
        display: block;
        margin: 0 auto $spacing-lg;
        text-align: center;

        @media #{$mq-sm} {
            margin: 0 0 $spacing-lg;
            text-align: left;
        }
    }
}

// --------------------------------------------------------------------------

.c-support {
    @include text-title-xs;
    background-color: $color-light-gray-10;
    display: block; // IE8
    font-weight: bold;
    padding: $spacing-lg;
    text-align: center;
}

// --------------------------------------------------------------------------
// mobile

.android main,
.ios main {
    @include flexbox;
    flex-direction: column;
}

#mobile-banner {
    order: -1;
}

.c-mobile {
    @include light-links;
    background-color: $color-violet-70;
    color: $color-white;
    position: relative;
    overflow-x: hidden;

    h2 {
        color: $color-white;
    }

    p {
        margin-bottom: $layout-md;
    }

    @media #{$mq-sm} {
        &::after {
            @include bidi((
                (left, 60%, right, auto),
                (margin-left, $h-grid-xs * 0.5, margin-left, 0),
            ));
            background-position: top center;
            background-repeat: no-repeat;
            border-radius: $border-radius-sm;
            bottom: $layout-lg;
            content: '';
            display: block;
            position: absolute;
            top: $layout-lg;
            width: 40%;

            &,
            .android & {
                @include at2x('/media/img/firefox/new/desktop/android.png', contain);
            }

            .ios & {
                @include at2x('/media/img/firefox/new/desktop/ios.png', contain);
            }
        }

        .c-mobile-text {
            @include bidi(((padding-right, $h-grid-xs * 0.5, padding-left, 0),));
            @include border-box;
            max-width: 60%;
        }
    }

    @media #{$mq-md} {
        &::after {
            @include bidi((
                (left, 50%, right, auto),
                (margin-left, $h-grid-md * 0.5, margin-right, 0),
            ));
        }

        .c-mobile-text {
            @include bidi(((padding-right, $h-grid-md * 0.5, padding-left, 0),));
            max-width: 50%;
        }
    }

    @media #{$mq-lg} {
        &::after {
            @include bidi(((margin-left, $h-grid-lg * 0.5, margin-right, 0),));
        }

        .c-mobile-text {
            @include bidi(((padding-right, $h-grid-lg * 0.5, padding-left, 0),));
        }
    }
}

.c-desktop a {
    @include text-title-xs;
    background-image: url('/media/img/firefox/new/desktop/mobile-arrow.svg');
    background-position: bottom center;
    background-repeat: no-repeat;
    color: $color-purple-50;
    display: block;
    font-weight: bold;
    padding: $spacing-md $h-grid-xs #{$spacing-lg + 64px};
    text-align: center;
    text-decoration: none;
}

// --------------------------------------------------------------------------
// scroll animation

@supports (animation-fill-mode: forwards) {
    .has-animate {
        opacity: 0;
        transform-origin: bottom center;
    }

    .is-animated {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-name: zoom;
    }

    @keyframes zoom {
        from {
            opacity: 0;
            transform: scaleX(0.8) scaleY(0.8);
        }

        to {
            opacity: 1;
            transform: scaleX(1) scaleY(1);
        }
    }
}