/* PLAYHEAD */

playhead {
    background: linear-gradient(to top,
            var(--col-coal),
            var(--col-coffee));
    padding-inline: 1rem;
    padding-block: 0.25rem;
    border-radius: 0.5rem;

    margin-inline: 0.25rem;

    display: inline-block;
    font-family: "JetBrains Mono", monospace;

    border-inline: 1px solid var(--col-ash);

    border-block-end: 1px solid var(--col-brown);
    border-block-start: 1px solid var(--col-oak);

    text-align: center;
}

playhead::before {
    content: 'play_arrow';
    color: var(--col-caramel);
    padding-inline-end: 0.5rem;
    font-family: "Material Symbols Outlined";

    user-select: none;

    display: inline;

    font-size: large;
    vertical-align: bottom;
}

a playhead {
    color: var(--col-cream);
}

a playhead::after {
    content: "open_in_new";
    color: var(--col-capuccino);
    font-weight: bold;

    padding-inline-start: 1.5rem;
    font-family: "Material Symbols Outlined";
    vertical-align: sub;
}

/* UPDATE */

update {
    background: linear-gradient(to top,
            var(--col-coal),
            var(--col-coffee));
    padding-inline: 1rem;
    padding-block: 0.25rem;
    border-radius: 0.5rem;

    font-weight: bold;
    margin-inline: 0.25rem;

    display: inline-block;
    
    border-inline: 1px solid var(--col-ash);
    border-block-end: 1px solid var(--col-brown);
    border-block-start: 1px solid var(--col-oak);

    width: 100%;
}

update::before {
    content: attr(updatetitle) ": ";
    font-style: italic;
}

update p {
    font-size: 0.75rem;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    font-style: italic;
    font-weight: normal;

    margin-block-end: 0.25rem;
}

update hr {
    margin-block: 0.25rem;
    margin-inline: -1rem;
}

update a {
    text-decoration: none;
}