/**
 *  Content
 *
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

.content {

    // paragraphs
    p {
        margin: $margin;
        @include media-breakpoints('margin', $margin-breakpoints);
    }

    // Semantic text elements
    a,
    ins,
    u {
        text-decoration-skip: ink edges;
    }

    a {
        text-decoration: underline;
    }

    // Add the correct font weight in Chrome, Edge, and Safari.
    b,
    strong {
        font-weight: bolder;
    }

    // Add the correct font size in all browsers.
    small {
        font-size: 80%;
    }

    /**
     *  Prevent `sub` and `sup` elements from affecting the line height in
     *  all browsers.
     */
    sub,
    sup {
        font-size: 70%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    abbr[title] {
        border-bottom: 1px dotted;
        cursor: help;
        text-decoration: none;
    }

    mark {
        padding: 0.25rem;
        background-color: var(--warning);
    }

    /**
     *  blockquote
     *
     *
     */
    blockquote {
        border-left: $border;
        margin-left: 0;
        padding: $padding;

        p:last-child {
            margin-bottom: 0;
        }
    }

    /**
     *  lists
     *
     */
    dl,
    ol,
    ul {
        padding: 0;
        margin: $margin;
        @include media-breakpoints('margin', $margin-breakpoints);
    }

    ul {
        margin-left: 1.5rem;
    }

    ol {
        margin-left: 2.5rem;
    }

    ol ol,
    ul ul {
        margin-top: 0;
        margin-left: 1.5rem;
    }

    ol {
        list-style: decimal outside;
    }

    ul {
        list-style: square outside;
    }

    dl {
        margin-left: 0.5rem;
    }

    dd,
    dt {
        margin: 0;
    }

    dt {
        font-weight: bold;
    }

    code {
        white-space: pre;
        display: block;

        color: var(--text-contrast);
        overflow-y: hidden;
        overflow-x: auto;
        border: $border;
        border-radius: $border-radius;
        background-color: var(--background);

        margin: $margin;
        @include media-breakpoints('margin', $margin-breakpoints);

        padding: $padding;
        @include media-breakpoints('padding', $padding-breakpoints);
    }
}

.highlight {
    padding: 0.15rem 0.4rem 0.25rem;
    background: var(--primary);
    color: var(--text-contrast);
    border-radius: $border-radius;
}