.notepad__date {
    padding-right: var(--space-smaller);
    padding-left: var(--space-smaller);

    color: var(--color-text-secondary);
    text-decoration: none;
}

.notepad__date:hover {
    text-decoration: underline dotted;
}

.notepad__container {
    --notepad-container-border: var(--color-grey-line);

    padding: var(--space-smaller);

    border: 1px solid transparent;
    border-radius: var(--radius);

    transition: border-color 0.2s ease-in-out;
}

.notepad__container:has(.popup__opener:focus-visible),
.notepad__container:has(.popup__opener[aria-expanded="true"]) {
    border-color: var(--notepad-container-border);
}

.notepad__note {
    overflow-x: hidden;

    margin-right: calc(-1 * var(--space-medium));
    margin-left: calc(-1 * var(--space-medium));
    padding-right: var(--space-medium);
    padding-left: var(--space-medium);

    overflow-wrap: break-word;
}

.notepad h1 {
    margin-top: 1.17em;
    margin-bottom: 0.67em;

    font-size: 1.5em;
}

.notepad h2 {
    margin-top: 1.25em;
    margin-bottom: 0.75em;

    font-size: 1.2em;
}

.notepad h3 {
    margin-top: 1.33em;
    margin-bottom: 0.83em;

    font-size: 1em;
}

.notepad code {
    padding-right: var(--space-smaller);
    padding-left: var(--space-smaller);

    font-size: var(--size-small);

    background-color: var(--color-accent-bg-subtle);
    border-radius: var(--radius);
}

.notepad pre {
    overflow: auto;

    padding: var(--space-medium) var(--space-small);

    color: var(--color-white);

    background-color: var(--color-rangoon);
    border-bottom: var(--width-border-bold) solid var(--color-caribbean);
    border-radius: var(--radius);
}

@media (min-width: 800px) {
    .notepad pre {
        padding-right: var(--space-medium);
        padding-left: var(--space-medium);
    }
}

.notepad pre code {
    padding: 0;

    color: var(--color-white);

    background-color: transparent;
    border: none;
}

.notepad blockquote {
    --blockquote-icon-size: 30px;
    --blockquote-icon-position: var(--space-medium);

    position: relative;

    margin-right: 0;
    margin-left: 0;
    padding: var(--space-smaller) var(--space-medium) var(--space-smaller) var(--space-medium);

    color: var(--color-accent-text-contrast);
    font-style: italic;

    background: var(--color-accent-bg-subtle);
    border-radius: var(--border-radius);
}

@media (min-width: 800px) {
    .notepad blockquote {
        --blockquote-icon-size: 40px;

        padding-right: var(--space-large);
        padding-left: var(--space-large);
    }
}

.notepad blockquote::before {
    content: "";

    position: absolute;
    top: var(--blockquote-icon-position);
    left: calc(-1 * var(--blockquote-icon-size) / 2);

    display: block;
    width: var(--blockquote-icon-size);
    height: var(--blockquote-icon-size);

    background-color: var(--color-caribbean);

    mask-image: url("../../icons/block-quote.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
}

.notepad blockquote::after {
    content: "";

    position: absolute;
    top: calc(var(--blockquote-icon-size) + var(--blockquote-icon-position));
    bottom: var(--space-medium);
    left: 0;

    display: block;
    width: 2px;

    background: linear-gradient(to bottom, var(--color-caribbean), var(--color-pampas));
}

.notepad__note > *:first-child {
    margin-top: 0;
}

.notepad__note > *:last-child {
    margin-bottom: 0;
}
