treehouse/static/css/components/chat.css

:root {
    --icon-choose: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iIzU1NDIzZSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=");
}

@media (prefers-color-scheme: dark) {
    :root {
        --icon-choose: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iI2Q3Y2RiZiIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=");
    }
}

th-chat {
    display: flex;
    flex-direction: column;
}

th-chat-said {
    display: flex;
    flex-direction: row;
    align-items: center;

    border: 0.1rem solid var(--border-1);
    padding: 1.2rem 1.6rem;
    margin: 0.8rem 0;
    border-radius: 0.8rem;

    max-width: 60%;

    & > .picture {
        padding-right: 1.6rem;
        align-self: baseline;
    }

    & > .text-container {
        display: inline-block;
    }
}

th-chat-asked {
    display: flex;
    flex-direction: row-reverse;

    & > button {
        /* Reset <button> */
        border: none;
        background: none;
        color: var(--text-color);
        user-select: auto;

        padding: 0.5em 0;
        margin-right: 2rem;

        --recursive-wght: 500;
        text-decoration: underline;
        text-align: right;
        opacity: 80%;

        cursor: pointer;
        transition: opacity var(--transition-duration);

        &.asked {
            display: none;
            opacity: 50%;
        }

        &[disabled] {
            --recursive-wght: 600;
            cursor: default;
            opacity: 100%;
            text-decoration: none;
        }

        &:hover {
            opacity: 100%;
        }

        &::before {
            content: "";
            display: inline-block;
            width: 1.6rem;
            height: 1.6rem;
            margin-right: 0.5em;
            background-image: var(--icon-choose);
            background-position: 50% 50%;
            background-repeat: no-repeat;
            opacity: 0%;
            vertical-align: middle;
            translate: -1em 0;
            transition:
                opacity var(--transition-duration),
                translate var(--transition-duration);
        }

        &:hover::before,
        &[disabled]::before {
            opacity: 50%;
            translate: 0 0;
        }
    }
}