special-pages/pages/special-error/app/components/Warning.module.css
.container {
    display: flex;
    flex-flow: column;
    gap: var(--sp-4);
    max-width: var(--ios-content-max-width);
    padding: var(--sp-8) var(--sp-10);
    overflow: hidden;
    width: 100%;
}

.content {
    display: flex;
    flex-flow: column;
    gap: var(--sp-5);

    & a {
        color: var(--link-color);
    }
}

.heading {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
}

.icon {
    background-repeat: no-repeat;
    background-size: contain;
}

.buttonContainer {
    display: flex;
    gap: var(--sp-2);
    padding-block-start: var(--sp-2);
}

/* Platform-specific styles */

/* macOS */
[data-platform-name="macos"] {
    & .icon {
        align-self: flex-start;
        flex: 0 0 var(--sp-12);
        height: var(--sp-12);
        width: var(--sp-12);
    }

    & .heading {
        gap: var(--sp-4);
    }

    & .ssl.heading {
        height: var(--sp-8);
    }

    & .ssl .icon {
        background-image: url(../../../../shared/assets/img/icons/Shield-Alert-96.svg);
        margin-left: calc(-1 * var(--sp-2));
        margin-top: calc(-1 * var(--sp-2));
    }

    & .phishing .icon, & .malware .icon, & .scam .icon {
        background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
        margin-left: calc(-1 * var(--sp-2));
        margin-right: calc(-1 * var(--sp-1));
    }

    & .buttonContainer {
        justify-content: flex-end;
    }
}

/* iOS */
[data-platform-name="ios"] {
    & .container {
        gap: var(--sp-6);
    }

    & .heading {
        flex-flow: column;
        gap: var(--sp-6);
        justify-content: center;
        text-align: center;
    }

    & .content {
        text-align: center;
        text-wrap: balance;
        white-space: pre-line; /* Preserve line breaks on all screen sizes */
    }

    & .buttonContainer {
        flex-flow: column-reverse;
        justify-content: center;
        align-items: center;
        gap: var(--sp-2);
        padding-top: var(--sp-6);
    }

    & .button {
        max-width: var(--sp-90);
        width: 100%;
    }

    & .advanced {
        background-color: transparent;
    }

    & .icon {
        flex: 0 0 var(--sp-24);
        height: var(--sp-24);
        width: var(--sp-32);
    }

    & .ssl .icon {
        background-image: url(../../../../shared/assets/img/icons/Shield-Alert-128.svg);
    }

    & .phishing .icon, & .malware .icon, & .scam .icon {
        background-image: url(../../../../shared/assets/img/icons/Malware-Site-128.svg);
    }

    /* Preserves line breaks on smaller screens to avoid orfan words.
       This is a fallback for browsers that don't support text-wrap: balance */
    & .title {
        white-space: pre-line;

        @media (min-width: 600px) {
            white-space: normal;
        }
    }
}

@supports (text-wrap: balance) {
    /* Balanced line breaks on title for browsers that support it */
    [data-platform-name="ios"] {
        & .title {
            text-wrap: balance;
            white-space: normal;
        }
    }
}

/* Windows */
[data-platform-name="windows"] {
    --border-radius-sm: 6px;

    & .icon {
        align-self: flex-start;
        flex: 0 0 var(--sp-12);
        height: var(--sp-12);
        width: var(--sp-12);
    }

    & .heading {
        gap: var(--sp-4);
    }

    & .ssl.heading {
        height: var(--sp-8);
    }

    & .ssl .icon {
        background-image: url(../../../../shared/assets/img/icons/Shield-Alert-96.svg);
        margin-left: calc(-1 * var(--sp-2));
        margin-top: calc(-1 * var(--sp-2));
    }

    & .phishing .icon, & .malware .icon, & .scam .icon {
        background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
        margin-left: calc(-1 * var(--sp-2));
        margin-right: calc(-1 * var(--sp-1));
    }

    & .buttonContainer {
        flex-flow: row-reverse;
        gap: var(--sp-4);
        justify-content: flex-end;
    }

    & .button {
        flex: 0 0 calc(50% - var(--sp-2));

        /* TODO: Move to shared? */
        font-family: var(--theme-font-family);
        font-size: calc(14 * var(--px-in-rem));
        font-weight: 400;
        line-height: normal;
    }

}