/* We use a custom counter here for Safari to
   get better control of its counter positioning.
   Because Safari does not recognize `content`
   properties on `::marker`, the style here better
   approximates the same styles set on `::marker`
   below. */
@counter-style numbers {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: ".";
}

.rendered_markdown {
    & p {
        margin: 0 0 var(--markdown-interelement-space-px);
    }

    /* The spacing between two paragraphs is double the usual value.
       We coordinate this spacing matches so that it matches the
       spacing between paragraphs in two consecutive 1-line messages. */
    & p + p {
        margin-top: var(--markdown-interelement-doubled-space-px);
    }

    & ul {
        margin: 0 0 var(--markdown-interelement-space-px) 0;
        /* Because browsers use inline padding, we set the
           same property here to offset bullets. */
        padding-inline-start: 1.1ch;
        /* By setting Unicode characters of our own, we
           gain better, cross-browser alignment of bullets. */
        list-style-type: "•";

        & ul {
            list-style-type: "◦";

            & ul {
                list-style-type: "▪︎";
            }
        }

        li {
            /* This aligns bullets to roughly the
               center of a single-digit counter.
               11.2px at 16px/1em */
            padding-inline-start: 0.7em;
        }

        & li::marker {
            /* This is an eyeballed value, but it makes the
               otherwise diminutive markers specified above
               both larger *and* better vertically centered. */
            font-size: 1.3em;
            /* We do not want the line-height for the item text
               affected by the larger font-size, though. So we
               zero it out. */
            line-height: 0;
        }
    }

    & ol {
        /* For the sake of Safari, we reference the `numbers`
           counter defined on `@counter-style` above. */
        list-style: numbers;
        /* To preserve the `start` attribute on lists that
           begin with a number other than 1, we update the
           `counter-reset` in postprocess_content.ts. */
        counter-reset: count;
        margin: 0 0 var(--markdown-interelement-space-px) 0;
        /* Because browsers use inline padding, we set the
           same here to offset the counters. */
        padding-inline-start: 2.1ch;

        & li {
            counter-increment: count 1;
            /* 3.2px at 16px/1em */
            padding-inline-start: 0.2em;
        }

        & li::marker {
            content: counter(count, decimal) ". ";
        }
    }

    /* To avoid cutting off the focus ring on links, we set
       padding on first children most likely to take links.
       We account for this extra space on `.message_content`. */
    & > p:first-child,
    & > ul:first-child,
    & > ol:first-child {
        padding-top: var(--message-box-link-focus-ring-block-padding);
    }

    /* We set margin according to the length of the longest list counter.
       The values here keep the counters flush left, just like paragraph
       text. */
    .counter-length-1 {
        padding-inline-start: 2.1ch;
    }

    .counter-length-2 {
        padding-inline-start: 3.1ch;
    }

    .counter-length-3 {
        padding-inline-start: 4.1ch;
    }

    .counter-length-4 {
        padding-inline-start: 5.1ch;
    }

    .counter-length-5 {
        padding-inline-start: 6.1ch;
    }

    .counter-length-6 {
        padding-inline-start: 7.1ch;
    }

    & hr {
        border-bottom: 1px solid hsl(0deg 0% 87%);
        border-top: 1px solid hsl(0deg 0% 87%);
        /* Override Bootstrap with doubled interelement space */
        margin: calc(var(--markdown-interelement-space-px) * 2) 0;
    }

    /* Headings */
    & h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 600;
        line-height: 1.4;
        /* Headings take a margin-top because of the pronounced extra
           space they require, but are zeroed out below when they open
           a message. */
        margin-top: 15px;
        margin-bottom: var(--markdown-interelement-space-px);
    }

    /* Headings: Ensure that messages that start with a heading don't have
       a weirdly blank area at the very start of the message. */
    & h1:first-child,
    h2:first-child,
    h3:first-child,
    h4:first-child,
    h5:first-child,
    h6:first-child {
        margin-top: 0;
    }

    /* We use a modest progression of heading sizes to make them stand out
       from normal next but avoid taking up too much space. */
    & h1 {
        font-size: 1.4em;
    }

    & h2 {
        font-size: 1.3em;
    }

    & h3 {
        font-size: 1.2em;
    }

    & h4 {
        font-size: 1.1em;
    }

    & h5 {
        font-size: 1.05em;
    }

    & h6 {
        font-size: 1em;
    }

    /* Formatting for blockquotes */
    & blockquote {
        /* This keeps the blockquote text block
           aligned with list-item text blocks.
           12.4px at 16px/1em */
        padding: 0 0 0 0.775em;
        /* We want to keep the border roughly centered
           with bullets and single-digit list markers.
           3.5px at 16px/1em */
        margin: 0 0 var(--markdown-interelement-space-px) 0.2188em;
        border-left: 4px solid var(--color-text-message-blockquote-border);
    }

    &.rtl blockquote {
        /* 12.4px at 16px/1em */
        padding: 0 0.775em 0 0;
        /* 3.5px at 16px/1em */
        margin: 0 0.2188em var(--markdown-interelement-space-px) 0;
        border-left: unset;
        border-right: 4px solid var(--color-text-message-blockquote-border);
    }

    /* Formatting for Markdown tables */
    & table {
        padding-right: 10px;
        margin: 0 5px var(--markdown-interelement-space-px);
        width: 99%;
        display: block;
        max-width: fit-content;
        overflow-x: auto;
        white-space: nowrap;
        border-collapse: collapse;
    }

    & thead {
        background-color: var(--color-background-rendered-markdown-thead);
    }

    & tr {
        display: table-row;
        vertical-align: inherit;
    }

    & tr th {
        border: 1px solid var(--color-border-rendered-markdown-table);
        padding: 4px;
        text-align: left;
    }

    & tr td {
        border: 1px solid var(--color-border-rendered-markdown-table);
        padding: 4px;
    }

    /* Emoji; sized to be easily understood while not overwhelming text. */
    .emoji {
        /* The box for emoji is allowed to be larger than the size of the
           line-height. */
        height: var(--length-line-oversize-block);
        width: var(--length-line-oversize-block);
        /* A negative top and bottom margin adjustment allows emoji
           to size larger than the size of the line, without disturbing
           the surrounding lines of text. */
        margin: var(--length-line-oversize-block-margin-adjust) auto;
        /* We set the alignment programmatically, as an em value.
           Because the negative margins above are equal, top and bottom,
           this vertical offset value works without adjustment for
           oversize emoji blocks. */
        vertical-align: var(--line-fitted-vertical-align-offset-em);
    }

    /* Mentions and alert words */
    .user-group-mention,
    .user-mention,
    .topic-mention {
        padding: 0 3px;
        border-radius: 3px;
        white-space: nowrap;
        /* Reduce the font-size to reduce the
           footprint of the background highlight. */
        font-size: 0.95em;
    }

    .mention-content-wrapper {
        /* Restore the font-size to match the rest
           of the message area. */
        font-size: 1.0526em;
    }

    .user-mention {
        color: var(--color-text-other-mention);
        background-color: var(--color-background-text-direct-mention);

        &.user-mention-me {
            color: var(--color-text-self-direct-mention);
            font-weight: 600;
        }

        &:hover {
            background-color: var(--color-background-text-hover-direct-mention);
        }
    }

    .user-mention,
    .user-group-mention {
        /* We have to explicitly mention this for compose box preview
           where cursor is set to not-allowed */
        cursor: pointer;
    }

    /* We show the same cursor as the parent element for `@all`
       mention */
    .user-mention-all {
        cursor: inherit;
    }

    .user-mention[data-user-id="*"],
    .user-group-mention,
    .topic-mention {
        color: var(--color-text-other-mention);
        background-color: var(--color-background-text-group-mention);

        &.user-mention-me {
            color: var(--color-text-self-group-mention);
            font-weight: 600;
        }
    }

    .stream-topic {
        /* Display whitespace within topics. */
        white-space: pre-wrap;
    }

    .user-group-mention {
        &:hover {
            background-color: var(--color-background-text-hover-group-mention);
        }
    }

    .alert-word {
        background-color: var(--color-background-alert-word);
    }

    /* Timestamps */
    & time {
        background: hsl(0deg 0% 93%);
        border-radius: 3px;
        box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
        white-space: nowrap;
        margin: 0 2px;
        /* Reduce the font-size to reduce the
           footprint of the timestamp block. */
        font-size: 0.95em;

        .timestamp-content-wrapper {
            /* Restore the font-size to match the rest
               of the message area, and apply the layout
               for the icon. */
            font-size: 1.0526em;
            padding: 0 0.2em;
            display: inline-flex;
            align-items: baseline;
            gap: 3px;
        }

        .markdown-timestamp-icon {
            align-self: center;
        }
    }

    /* LaTeX styling */
    .katex-display {
        /* KaTeX sometimes overdraws its bounding box by a little, so we
           enlarge its scrolling area by adding 3px of padding to its top
           and bottom. To prevent what will appear as extra whitespace,
           we reduce surrounding margins by the same 3px. */
        padding: 3px 0;
        margin: -3px 0;
        overflow: auto hidden;
    }

    .katex-mathml annotation {
        /* Because annotations are never displayable, browser user-agent
           stylesheets mark them as not displayable, which has the
           side effect of having them not be included in the HTML
           version of copying the content. Override this, so KaTeX can
           be copy/pasted within Zulip. */
        user-select: all;
        display: inline;
    }

    .tex-error {
        color: hsl(0deg 0% 50%);
    }

    /* Spoiler styling */
    .spoiler-block {
        border: hsl(0deg 0% 50%) 1px solid;
        padding: 2px 8px 2px 10px;
        border-radius: 10px;
        /* Space any subsequent Markdown content the same
           distance as adjacent paragraphs are spaced. */
        margin: 0 0 var(--markdown-interelement-doubled-space-px);

        .spoiler-header {
            /* We use flexbox to display the spoiler message
               and button. */
            display: flex;
            align-items: center;
            padding: 8px 5px;
            font-weight: bold;

            .spoiler-header-text {
                /* Disallow margin from ordinary rendered-markdown
                   elements. The header's vertical space is handled
                   independently by padding on .spoiler-header. */
                margin-bottom: 0;
                /* Message grows to push the arrow to the right,
                   but shrinks so as to allow long multi-line
                   spoiler messages to wrap. */
                flex: 1 1 auto;
            }

            time {
                /* Time tag pushes the arrow out of view when overflow,
                   adding white-space property prevents this by wrapping
                   the element */
                white-space: normal;
            }
        }

        .spoiler-content {
            overflow: hidden;
            border-top: hsl(0deg 0% 50%) 0 solid;
            transition:
                /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
                height 0.4s ease-in-out,
                border-top 0.4s step-end,
                padding 0.4s step-end; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
            padding: 0;
            height: 0;

            &.spoiler-content-open {
                border-top: hsl(0deg 0% 50%) 1px solid;
                transition:
                    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
                    height 0.4s ease-in-out,
                    border-top 0.4s step-start,
                    padding 0.4s step-start; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
                padding: 5px;
                height: auto;
            }
        }

        .spoiler-button {
            /* Keep the button to a consistent right-hand edge. */
            padding-right: 3px;

            &:hover .spoiler-arrow {
                &::before,
                &::after {
                    background-color: hsl(0deg 0% 50%);
                }
            }
        }

        .spoiler-arrow {
            float: right;
            width: 15px;
            cursor: pointer;
            transition: transform 0.4s ease;
            transform: rotate(45deg);

            &::before,
            &::after {
                position: absolute;
                content: "";
                display: inline-block;
                width: 12px;
                height: 3px;
                background-color: hsl(0deg 0% 83%);
                transition: transform 0.4s ease;
            }

            &::after {
                position: absolute;
                transform: rotate(90deg);
                top: -5px;
                left: 5px;
            }

            &.spoiler-button-open {
                transform: rotate(45deg) translate(-5px, -5px);

                &::before {
                    transform: translate(10px, 0);
                }

                &::after {
                    transform: rotate(90deg) translate(10px, 0);
                }
            }
        }
    }

    /* embedded link previews */
    .message-thumbnail-gallery {
        display: flex;
        flex-flow: row wrap;
        place-items: center center;
        gap: 5px;
        margin-bottom: var(--markdown-interelement-space-px);
    }

    .message_inline_image_title {
        font-weight: bold;
    }

    .twitter-image,
    .message_inline_image {
        /* Set a background for the image; the background will be visible
           behind the width of the transparent border. */
        border: solid 3px transparent;
        transition: background 0.3s ease;
        background: var(--color-background-image-thumbnail);

        /* Inline videos also take the dinky color, as they
           currently display a larger clickable area than
           necessary. */
        &.message_inline_video,
        &:has(.dinky-thumbnail, .extreme-aspect-ratio) {
            background: var(--color-background-image-thumbnail-dinky);

            &:hover {
                background: var(--color-background-image-thumbnail-dinky-hover);
            }
        }

        &:hover {
            background: var(--color-background-image-thumbnail-hover);
        }

        & .media-anchor-element {
            display: block;
        }

        & .media-image-element {
            display: block;
            object-fit: scale-down;

            /* Sizing CSS for inline images requires care, because images load
               asynchronously, and browsers will unfortunately jump your
               scroll position when elements load above the current
               position in the message feed in a way that changes the
               height of elements. (As of March 2022, both Firefox and
               Chrome exhibit this problem, though in Chrome it is pretty
               subtle).

               We prevent this by utilizing dimensions on the `<img>` elements,
               but further care is needed because different layout mechanisms,
               including inline-block, can ignore those dimensions. For that
               reason, we enforce a minimum 4em square for "dinky" images,
               and set the scaled-down width on all others via JavaScript.

               If there are several images next to each other, we display
               them in a grid format; the same considerations require
               use to either use a scrollable region or set a predictable
               size for images so that the browser statically knows whether
               it'll need to overflow. We choose predictable sizes here. */

            /* Ensure a reasonable clickable area on
               extremely tall or extremely wide images. */
            min-width: 4em;
            min-height: 4em;

            /* Constrain height to 10em, but otherwise keep
               the width to the size of the gallery, and
               therefore the message area. */
            max-height: 10em;
            max-width: 100%;

            /* Allow height and width to grow as needed, though
               note we set the scaled-down `width` property on
               each image in JavaScript to keep flexbox from
               collapsing to the min-height and min-width values
               set above... */
            width: auto;
            height: auto;
        }

        img.image-loading-placeholder {
            content: var(--svg-url-thumbnail-loader);
        }
    }

    /* In browsers that support `:has()`, we pull
       `.rendered_markdown` out of the baseline group
       formed with EDITED/MOVED markers and the
       timestamp when the first child of the rendered
       markdown is a horizontal rule, a media element,
       or KaTeX. */
    &:has(> hr:first-child),
    &:has(> .message_inline_image:first-child),
    &:has(> p:first-child > .katex-display) {
        align-self: center;
    }

    /* But for browsers that don't support :has(),
       we provide a small layout hack using an
       inline grid. */
    @supports not selector(:has(*)) {
        p:first-child > .katex-display {
            /* KaTeX should take up 100% of the message box,
               so that KaTeX's own CSS for centering still works. */
            width: 100%;
        }

        p:first-child > .katex-display,
        .message_inline_image {
            /* We'll display this bit of media as
               an inline grid. That will allow us
               to put beneath the image a piece of
               invisible ::before content that we'll
               generate to participate in the
               messagebox-content grid's baseline
               group. */
            display: inline-grid;
            /* We create a grid area called
               "media", so that both the inner
               <a> element and the ::before content
               can sit there. `auto` will take on
               the height and width otherwise assigned
               to the .message_inline_image. Setting
               the min value to 0 on minmax() ensures
               that media larger than those dimensions
               don't cause a grid blowout. */
            grid-template: "media" minmax(0, auto) / minmax(0, auto);
        }

        p:first-child > .katex-display > .katex,
        .message_inline_image .media-anchor-element,
        .message_inline_image .media-video-element {
            /* We explicitly place the containing
               media element in the thumbnail area. */
            grid-area: media;
        }

        p:first-child > .katex-display::before,
        .message_inline_image::before {
            /* We generate a single . here to create
               text content enough for a baseline.
               Generated content is not generally
               read aloud to screen readers. */
            content: ".";
            /* We color the generated . transparently,
               so it won't be visible when the media
               doesn't cover the entire area. */
            color: transparent;
            /* And we explicitly place the . in the thumbnail
               area, too. Otherwise, grid would generate a new
               column track for it to sit in. */
            grid-area: media;
        }
    }

    .twitter-tweet {
        border: 1px solid hsl(0deg 0% 87%);
        padding: 0.5em 0.75em;
        margin-bottom: 0.25em;
        overflow-wrap: anywhere;
        min-height: 48px;
    }

    .twitter-avatar {
        float: left;
        width: 48px;
        height: 48px;
        margin-right: 0.75em;
    }

    .message_inline_ref {
        margin-bottom: var(--markdown-interelement-space-px);
        margin-left: 5px;
        height: 50px;
        display: block !important;
        border: none !important;
    }

    &.rtl .message_inline_ref {
        margin-left: unset;
        margin-right: 5px;
    }

    .message_inline_image .media-image-element {
        cursor: zoom-in;
    }

    .youtube-video .media-image-element,
    .vimeo-video .media-image-element,
    .embed-video .media-image-element {
        cursor: pointer;
    }

    .youtube-video .media-image-element {
        /* We do this for the sake of increasing
           the size of older YouTube thumbnail
           previews, but there are no ill effects
           on newer preview images. */
        object-fit: contain;
    }

    .message_inline_video,
    .message_inline_animated_image_still,
    .youtube-video .media-anchor-element {
        /* Once collections of thumbnails are set to render as
           flex items, this can be updated to use `display: grid`
           instead of `display: inline-grid`. */
        display: inline-grid;
        grid-template: "media" minmax(0, auto) / minmax(0, auto);
        place-items: center center;

        &:hover {
            &::after {
                transform: scale(1);
            }
        }

        /* The .media-anchor-selector is for all media
           except YouTube, which needs to place
           .media-image-element on the grid. */
        & .media-anchor-element,
        & .media-image-element {
            grid-area: media;
        }

        &::after {
            grid-area: media;
            content: "";
            background-image: url("../images/play_button.svg");
            background-position: center center;
            background-repeat: no-repeat;
            /* 32px at 14px/1em */
            background-size: 2.2857em;
            /* Match the box to the play button's
               background-size value. */
            width: 2.2857em;
            height: 2.2857em;
            border-radius: 100%;
            transform: scale(0.8);
            transition: transform 0.2s;
        }

        & .media-video-element {
            display: block;
            object-fit: contain;
            /* Since we do not yet read height and width
               values for media thumbnails, we carry forward
               reasonable dimensions for a landscape thumbnail
               here. */
            height: 8em;
            width: 12em;
        }
    }

    .youtube-video .media-anchor-element {
        /* We display the youtube-video anchor
           as a grid, not inline grid, to avoid
           additional space beneath the thumbnail. */
        display: grid;
    }

    .message_embed {
        display: grid;
        grid-template-columns:
            [thumbnail-start] var(--length-message-preview-embeds)
            [thumbnail-end fader-start data-container-start] minmax(0, 1fr)
            [data-container-end fader-end];
        grid-template-rows:
            [border-start thumbnail-start data-container-start] calc(
                var(--length-message-preview-embeds) - 10%
            )
            [fader-start] 10% [data-container-end thumbnail-end border-end fader-end];
        column-gap: 5px;
        margin: 0 0 var(--markdown-interelement-space-px);
        /* We want to control the height without worrying about
           padding... */
        box-sizing: border-box;
        /* ...though we will account for 10px of padding in the
           height itself, so that the fade effect on long description
           text works as expected. */
        height: calc(var(--length-message-preview-embeds) + 10px);
        padding: 5px;
        border-left: 3px solid hsl(0deg 0% 93%);

        .message_embed_title {
            font-size: 1.2em;
            /* 5px at 16.8px (1.2 * 14px) */
            margin-top: -0.2976em;
            /* We set the markdown link colors here so
               that the ellipsis takes it on truncated
               lines. The ellipsis will not take an
               underline even if we specify one, so
               that is deliberately omitted here. */
            color: var(--color-markdown-link);

            &:hover {
                color: var(--color-markdown-link-hover);
            }

            .message-embed-title-link {
                /* Line-clamp lines seem to have a small
                   interline area that's not clickable
                   unless we set the anchor to display as
                   a block. */
                display: block;
            }
        }

        .message_embed_title,
        .message_embed_description {
            /* Clamp multi-line titles and descriptions
               to two lines. */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            /* Break overflowing words as necessary. */
            overflow-wrap: break-word;
        }

        .message_embed_image {
            display: block;
            grid-area: thumbnail;
            /* Keep the embed image square. */
            max-height: var(--length-message-preview-embeds);
            background-size: cover;
            background-position: center;
        }

        .data-container {
            grid-area: data-container;
            overflow: hidden;
        }
    }

    /* Although grid will automatically respond to
       RTL languages, we still need to manually fix
       the border here, which is not part of grid. */
    &.rtl .message_embed {
        border-left: unset;
        border-right: 3px solid hsl(0deg 0% 93%);
    }

    & a {
        color: var(--color-markdown-link);
        text-decoration: none;

        & code {
            color: var(--color-markdown-code-link);
        }

        &:hover,
        &:focus {
            color: var(--color-markdown-link-hover);
            text-decoration: underline;

            & code {
                color: var(--color-markdown-code-link-hover);
            }
        }
    }

    & pre {
        direction: ltr;
        /* code block text is a bit smaller than normal text */
        font-size: 0.825em;
        line-height: 1.4;
        white-space: pre;
        overflow-x: auto;
        word-break: break-all;
        word-wrap: normal;
        margin: 0 0 var(--markdown-interelement-space-px);
        padding: 5px 7px 3px;
        display: block;
        border-radius: 4px;

        &:hover .code-buttons-container {
            visibility: visible;
        }

        /* Hide the code buttons container when the user is
           clicking on the code block other than the buttons.
           This allows the user to select part of the the code
           without the buttons interfering with the selection. */
        &:active .code-buttons-container:not(:hover) {
            visibility: hidden;
        }
    }

    & pre code {
        font-size: inherit;
        padding: 0;
        white-space: inherit;
        overflow-x: scroll;
        /* Unset to avoid compounding alpha values */
        background-color: unset;
        color: inherit;
        border: 0;
    }

    & code {
        /* 11.55px when body is the default 14px; this is chosen to be
        slightly above the 11.5px threshold where the height jumps by a
        pixel on most platforms. */
        font-size: 0.825em;
        unicode-bidi: embed;
        direction: ltr;
        white-space: pre-wrap;
        /* 1px at 14px/1em */
        padding: 0.0714em 2px;
        color: var(--color-markdown-code-text);
        background-color: var(--color-markdown-code-background);
        border-radius: 3px;
    }

    /* Container for buttons inside code blocks. */
    .code-buttons-container {
        /* Break white-space treatment inherited from <pre> */
        white-space: collapse;
        /* Present buttons in a flexbox layout. */
        display: flex;
        align-items: center;
        gap: 3px;
        /* Having absolute positioning here ensures that the element
        doesn't scroll along with the code div in narrow windows */
        position: absolute;
        top: 4px;
        right: 0;
        padding: 0 4px;
        /* Invisible unless <pre> is hovered. */
        visibility: hidden;
        z-index: 0;
    }

    /* The properties of the code_external_link button are copied from the
       copy-button class in app_components.css. */
    .code_external_link {
        display: flex;
        border-radius: 4px;
        color: var(--color-copy-button);
        /* 2px at 16px/1em */
        padding: 0.125em;
        cursor: pointer;

        &:hover,
        :focus-visible {
            background-color: var(--color-copy-button-square-bg-hover);
        }

        &:active {
            background-color: var(--color-copy-button-square-bg-active);
            color: var(--color-copy-button-square-active);
        }
    }

    .copy_codeblock,
    .code_external_link {
        font-size: 1.1363em;
        border: 1px solid var(--color-copy-button-square-bg-active);
        backdrop-filter: blur(20px);
    }
}

.group_mention,
.direct_mention {
    & .rendered_markdown pre {
        background-color: var(--color-markdown-pre-background-mentions);
        border-color: var(--color-markdown-pre-border-mentions);
    }

    & .rendered_markdown code {
        background-color: var(--color-markdown-code-background-mentions);
    }

    & .rendered_markdown pre code {
        background-color: unset;
        border-color: unset;
    }
}

.preview_content .copy_codeblock {
    /* We avoid displaying copy_codeblock button in previews, because it
       feels odd given that you can just copy-paste the code out of
       the "edit" state.  We may change this decision when we add
       menu options for viewing the code in a coding playground. */
    display: none;
}

.informational-overlays .copy_codeblock {
    display: none;
}

.message_edit_history_content .copy_codeblock {
    /*  Copy code block button is hidden in edit history, this is done
        because of issues faced in copying code blocks in edit history
        modal. This may be changed later as we decide upon a proper ux
        for displaying edit-history. */
    display: none;
}

.message_edit_history_content .code_external_link {
    right: 5px;
}

.preview_content .code_external_link {
    right: 12px;
}

@media (width < $sm_min) {
    .rendered_markdown .message_embed {
        height: auto;

        .message_embed_image {
            width: 100%;
            height: 100px;
        }

        .data-container {
            display: block;
            max-width: 100%;
            margin-top: 10px;
        }
    }
}

.codehilite {
    display: block !important;
    border: none !important;
    background: none !important;

    /* Set a relative positioning context to more precisely
       position .code-buttons-container. This eliminates
       problems with positioning shifts associated with
       code blocks in spoilers, too. */
    position: relative;

    & pre {
        color: var(--color-markdown-pre-text);
        /* This is necessary to remove the background color
           set by Pygments. */
        background-color: var(--color-markdown-pre-background);
        border: 1px solid var(--color-markdown-pre-border);
    }
}

/* Both the horizontal scrollbar in <pre/> as well as
   vertical scrollbar in the <textarea/> is styled similarly. */
.message_edit_form textarea,
.rendered_markdown pre {
    /* Ensure the horizontal scrollbar is visible on Mac */
    &::-webkit-scrollbar {
        height: 8px;
        width: 10px;
        background-color: hsl(0deg 0% 0% / 5%);
    }

    &::-webkit-scrollbar-thumb {
        background-color: hsl(0deg 0% 0% / 30%);
        border-radius: 20px;
        cursor: auto;
        transition: background-color 0.2s ease;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: hsl(0deg 0% 0% / 60%);
    }
}

/* Search highlight used in both topics and rendered_markdown */
.highlight {
    background-color: hsl(51deg 100% 79%);
}

/* For elements where we want to show as much markdown content we can
   in a single line and then hide the overflowing part. */
.single-line-rendered-markdown {
    /* Any element which can `wrap` in the above defined elements. */
    code,
    .stream-topic {
        white-space: nowrap;
    }
}

.user-mention {
    i.zulip-icon-bot {
        vertical-align: middle;
        position: relative;
        top: -1px;
        padding-left: 0.3em;
    }
}