media/css/m24/launchpad.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 'vars/lib' as *;

$launchpad-logo-width: 32px;
$launchpad-logo-padding: 16px;
$launchpad-logo-spacing: $launchpad-logo-width + $launchpad-logo-padding;

.m24-c-launchpad {
    margin: $spacer-xl 0;

    .m24-c-launchpad-item:first-child {
        border-top: $border-width solid transparent; // accommodates negative margin needed for @include short-dividers();
    }

    .m24-c-content &:last-child {
        margin-bottom: 0;
    }
}

.m24-c-launchpad-link {
    @include short-dividers($m24-color-light-gray);
    @include grid;
    color: $m24-color-black;
    gap: $spacer-2xs $grid-gutter;
    margin-left: calc($container-padding * -1);
    margin-right: calc($container-padding * -1);
    padding: $spacer-md $container-padding;
    position: relative;
    text-decoration: none;
    transition: background-color $fast $bezier;

    &:hover,
    &:link:active, // override protocol
    &:focus-visible {
        background-color: $m24-color-light-gray;
        position: relative;
        z-index: 2;
    }

    &::before,
    &::after {
        @include bidi(((background-position, center left, center right),));
        content: '';
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
    }

    &::before {
        @include bidi((
            (left, $container-padding, auto),
            (right, auto, $container-padding),
        ));
        background-size: $launchpad-logo-width auto;
        width: $launchpad-logo-width;
    }

    &::after {
        @include bidi((
            (right, $container-padding, auto),
            (left, auto, $container-padding),
            (transition-property, right, left),
            (background-image, url('/media/img/icons/m24-small/arrow-right.svg'), url('/media/img/icons/m24-small/arrow-left.svg'))
        ));
        background-size: 18px auto;
        transition-duration: $fast;
        transition-timing-function: $bezier;
        width: $launchpad-logo-width;
    }

    &:focus-visible::after,
    &:active::after,
    &:hover::after {
        @include bidi((
            (right, $spacing-sm, auto),
            (left, auto, $spacing-sm),
        ));
    }

    &.m24-t-product-firefox::before {
        background-image: url('/media/protocol/img/logos/firefox/browser/logo.svg');
    }

    &.m24-t-product-fakespot::before {
        background-image: url('/media/img/logos/fakespot/logo.svg');
    }

    &.m24-t-product-pocket::before {
        background-image: url('/media/protocol/img/logos/pocket/logo.svg');
    }

    &.m24-t-product-vpn::before {
        background-image: url('/media/protocol/img/logos/mozilla/vpn/logo.svg');
    }

    &.m24-t-product-monitor::before {
        background-image: url('/media/protocol/img/logos/firefox/monitor/logo.svg');
    }

    &.m24-t-product-thunderbird::before {
        background-image: url('/media/img/logos/thunderbird/logo-thunderbird.svg');
    }

    &.m24-t-product-relay::before {
        background-image: url('/media/protocol/img/logos/firefox/relay/logo.svg');
    }
}

.m24-c-launchpad-title {
    @include bidi((
        (padding-left, $launchpad-logo-spacing, 0),
        (padding-right, 0, $launchpad-logo-spacing),
    ));
    color: $m24-color-black;
    display: inline-block;
    font-size: $text-body-lg;
    font-weight: 600;
    grid-column: 1 / span 10;
    line-height: 1;

    b { // punctuation for screen readers
        color: transparent;
    }
}

.m24-c-launchpad-info {
    color: $m24-color-dark-gray;
    font-size: $text-body-sm;
    grid-column: 1 / span 11;
    @include bidi((
        (padding-left, $launchpad-logo-spacing, $launchpad-logo-padding),
        (padding-right, $launchpad-logo-padding, $launchpad-logo-spacing),
    ));
}

@media #{$mq-md} {
    .m24-c-launchpad-info {
        font-size: $text-body-md;
    }
}

@media #{$mq-lg} {
    .m24-c-launchpad-title {
        grid-column: 1 / 4;
        align-content: center;
    }

    .m24-c-launchpad-info {
        grid-column: 4 / 12;
        padding-left: 0;
        padding-right: 0;
        align-content: end;
    }
}