/* ==============
mhsu 2024-10-29 : attempting a new theme...
based on Dracula
================= */
body.theme-default {
    --background-color: #343746;
    --background-border-color: #bd93fa80;
    --modal-background-color: #6272aa50;
    --modal-border-color: #bd93fa50;
}
.display-name {
    color: #abb2da90;
}
.display-name__html { /* this doesn't seem to be working rn */
    color: #b4b8d6;
}
.content-warning {
    box-sizing: border-box;
    border: 1px solid var(--color-indigo-700); /* mhsu 2026-02-04: adding border color */ 
}
.status__wrapper-direct { /* mhsu 2026-06-17: updating for new masto version */
    background: var(--color-yellow-950);
    border: 1px solid var(--color-yellow-700);
    border-radius: 8px;
}
.status--is-quote { /* mhsu 2026-06-17: updating for new masto version */
    background: var(--color-green-950);
    border: 1px solid var(--color-green-700);
}
.load-gap { /* mhsu 2026-06-17: updating for new masto version */
    background: var(--color-yellow-950);
}
/* mhsu 2026-02-05: making unread notifs stand out more */
.notification-ungrouped--unread { /* mhsu 2026-06-17: updating for new masto version */
    background: var(--color-yellow-700);
}
.drawer__inner__mastodon > img { /* mhsu 2026-06-17: updating for new masto version */
    width: 100%;
}
.flash-message.notice { /* mhsu 2026-06-17: updating for new masto version */
    background: #9c78ba70;
    border: 1px solid #9c78ba;
    color: #f1fa8c;
    font-size: large;
}

/*******/
/* from https://mastodon.art/css/custom-f44876c6.css */
/******/
/* Changes the alert symbol (A ! inside a triangle) for adding a content warning to a toot to instead just read 'CW' */
.compose-form__buttons button[aria-label$="content warning"] svg {
        display: none;
    }
.compose-form__buttons button[aria-label$="content warning"]::before {
        display: flex;
        content: 'CW';
        min-width: 20px;
        min-height: 20px;
        align-items: center;
        justify-content: center;
    }
/* It's 'Toot!'. It was always 'Toot!'. */
.compose-form__actions .button {
    font-size: 0;
    width: 75px;
    height: 35px;
    }
    .compose-form__actions .button::before {
        font-size: 15px;
        content: 'Toot!';
    }