media/css/privacy/privacy-protocol.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 *;
@use '~@mozilla-protocol/core/protocol/css/includes/mixins/details';
@use '~@mozilla-protocol/core/protocol/css/components/sidebar-menu';
@use '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';

@use '../protocol/basic-article';

$border: 2px solid $color-marketing-gray-20;

.mzp-c-sidemenu .mzp-c-sidemenu-title {
    font-family: var(--body-font-family);
}

@media #{$mq-md} {
    .mzp-l-sidebar {
        padding-top: 156px; // height of privacy-title
    }

    .mzp-c-sidemenu-main {
        margin-left: -16px; // flush with left side of container
    }
}

@media #{$mq-lg} {
    .mzp-l-main {
        > header,
        > main,
        > footer {
            max-width: 640px; // narrow max-width for readability
        }
    }
}

// * -------------------------------------------------------------------------- */
// Policy header

.privacy-logo {
    height: 40px;
    margin-bottom: $spacing-sm;
    width: auto;

    @media #{$mq-sm} {
        @include bidi((
            (float, left, right),
            (margin-right, $spacing-sm, margin-left, 0),
        ));
    }

    @media #{$mq-md} {
        @include bidi((
            (left, $layout-lg, right, auto),
        ));
        position: absolute;
    }

    @media #{$mq-lg} {
        @include bidi((
            (left, $layout-xl, right, auto),
        ));
    }
}

.privacy-title {
    margin-bottom: $spacing-lg;

    @media #{$mq-sm} {
        margin-top: $layout-sm;
        margin-bottom: $layout-md;
    }

    @media #{$mq-md} {
        min-height: 56px; // keep consistant height of element even if time element is not present
        margin-top: $layout-sm;
        margin-bottom: $layout-lg;
    }

    h1 {
        @include text-title-xs;
        font-weight: bold;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .archived {
        background: $color-red-70;
        color: $color-white;
        display: inline-block;
        margin-top: $spacing-sm;
        padding: $spacing-sm;
    }
}

// * -------------------------------------------------------------------------- */
// Policy header intro

.privacy-lead-in {
    border-bottom: $border;
    clear: both;
    margin-bottom: $layout-sm;
    padding-bottom: $layout-xs;

    h2 {
        @include text-title-md;
    }
}

// * -------------------------------------------------------------------------- */
// Main policy content

.privacy-body {
    > div > section > section {
        border-bottom: $border;
    }

    h2 {
        @include text-title-sm;
        margin-bottom: $layout-sm;
    }

    h3 {
        @include text-title-xs;
        margin: $layout-sm 0;
    }

    h4 {
        @include text-body-md;
        margin: $layout-sm 0;
    }

    hr {
        display: none;
    }
}

.format-none {
    .privacy-body h2 {
        margin-top: $layout-md;
    }
}

#optional-features {
    margin-top: $layout-lg;
}

// * -------------------------------------------------------------------------- */
// Privacy choices widget

.data-choices {
    @include clearfix;
    background-color: $color-marketing-gray-20;
    border-radius: $border-radius-md;
    margin-top: $spacing-xl;
    padding: $spacing-sm;
    position: relative;
    text-align: center;

    p {
        @include text-body-md;
        display: inline-block;
        margin: 0;
        padding: $spacing-sm 0;
    }

    .mzp-c-button {
        display: block;
        margin: $spacing-md auto 0;
    }

    @media #{$mq-md} {
        @include grid-column-gap($spacing-lg);
        display: grid;
        grid-template-columns: 4fr 1fr;

        @include bidi(((text-align, left, right),));

        .mzp-c-button {
            margin: 0;
        }
    }
}

// * -------------------------------------------------------------------------- */
// Policy footer

.privacy-footnote {
    @include text-body-md;
    border-top: $border;
    margin-top: $spacing-2xl;
    padding: $spacing-2xl 0;

    h2 {
        @include text-title-sm;
    }

    h3 {
        @include visually-hidden;
    }
}

// * -------------------------------------------------------------------------- */
// Summary and details widget

.format-headings .privacy-body {
    @include details;

    .is-summary {
        button {
            @include summary;
            @include bidi(((padding-left, 0, padding-right, 0),));
        }

        button[aria-expanded='true']::before {
            @include summary-open;
        }

        + div {
            margin-top: $spacing-sm * -1;
            margin-bottom: $spacing-xl;
        }
    }
}

.format-paragraphs .privacy-body {
    @include details;

    .is-summary {
        button {
            padding: 0;

            &::after {
                color: $color-link;
                content: attr(data-open);
                margin-left: 0.5ex;
                text-decoration: underline;
            }
        }

        button[aria-expanded='true']::after {
            content: attr(data-close);
        }

        + div {
            margin-top: $spacing-sm * -1;
            margin-bottom: $spacing-xl;
        }
    }
}

// * -------------------------------------------------------------------------- */
// Privacy Principles page

#privacy-principles,
#privacy-faq {
    .mzp-l-sidebar {
        padding-top: 0;
    }
}

#privacy-principles {
    ol {
        @include text-title-md;
        font-weight: bold;
        margin-left: 1.15em;

        h2 {
            margin-bottom: $spacing-xs;
        }

        p {
            @include text-body-md;
            font-weight: normal;
        }
    }
}