/* Compose form
 * Why are the buttons inside? Why?
 */
.compose-form__highlightable {
    border: 0;
    background: 0;
}
 
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
    border: 1px solid var(--background-border-color);
    border-radius: 4px;
}
 
.compose-form__footer {
    display: grid;
    grid-template-areas:
        "buttons buttons"
        "dropdowns submit";
    padding: 0;
}
 
.compose-form__buttons {
    grid-area: buttons;
}
 
.compose-form__dropdowns {
    grid-area: dropdowns;
}
 
.compose-form__submit {
    grid-area: submit;
}
 
.compose-form__actions {
    display: contents;
}
 
.compose-form__uploads {
    padding: 0;
}
 
.compose-form .spoiler-input__input {
    border-radius: 4px 4px 0 0;
}
 
.compose-form .spoiler-input + .autosuggest-textarea .autosuggest-textarea__textarea {
    border-radius: 0 0 4px 4px;
    border-top: 0;
}
 
.compose-form .spoiler-input .autosuggest-input {
    border-bottom: 0;
}
 
.compose-form__poll .poll__option {
    padding: 0;
}
 
.emoji-picker-dropdown__menu {
    margin-left: 5px;
}
 
.compose-form__footer [title$="privacy"] span {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
 
/* Changes the 'Show anyway' and 'Hide post' text under Content Warnings to instead be a
* 'show/hide' toggle. 
*/
.content-warning .link-button span {
 font-size:0;
}
 
.content-warning .link-button span::after {
  content: "Show/Hide";
  font-size: 14px;
  display: inline;
}
 
/* 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;
    }
 
/* Shrinks column width and padding to recover lost horizontal space*/
 
.column {
    width: 350px;
}
 
.drawer {
    width: 335px;
}
 
.column, .drawer {
        padding-inline-end: 2px;
        padding-inline-start: 2px;
    }
 
.notification-group {
    padding: 16px 10px;
}

.notification-group--direct, .notification-ungrouped--direct, .status__wrapper-direct {
    background: rgba(15, 132, 138, 0.37);
}
 
.notification-ungrouped {
    padding: 16px 10px;
}
 
/* Changes the colour of the line separating posts to make it more clearly visible where one post ends and another begins */
 
.notification-group, .notification-ungrouped, .status {
    border-bottom: 2px solid --background-border-color;
    }
 
/* When default server theme is set to dark, changes the entire background colour to make it lighter, and the background colour of colums to make them lighter than the main body, to reduce stark contrast */
 
/*body.theme-default {
  --background-color: #454545;
  --background-color-tint: #34374a70;
  --background-border-color: #178076;
  --modal-background-color: #2e4a56;
  --modal-border-color: #497588;
}*/

/* mhsu 2024-10-26 : changing color of column & element background */
.scrollable {
    background: #44475a20;
}

/* ==============
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;
}
.status__prepend {
    color: #abb2df;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status__content{
    color: #f8f8f2;
}
.status__content a {
    color: #bdbfcd;
    text-decoration: underline;
}
.content-warning {
    background: #424450;
    box-sizing: border-box;
    color: #f8f8fa90;
}
.content-warning::before, .content-warning::after {
    background: #343746;
}
.notification-group__main__status {
    background: #4b4d5b;
    border: 1px solid --modal-border-color;
}
.drawer__inner__mastodon {
    background: url(https://cdn.masto.host/spannerworks/site_uploads/files/000/000/009/original/df1b2c670553753d.png) no-repeat bottom/100% auto;
    display: none;
    flex: 1;
    min-height: 47px;
}
.flash-message.notice {
    background: #9c78ba70;
    border: 1px solid #9c78ba;
    color: #f1fa8c;
    font-size: large;
}

 
/* Changes the 'Post' button to read 'Toot!' instead, and increases the button size */
 
.compose-form__actions .button {
    font-size: 0;
    width: 75px;
    height: 35px;
}
 
.compose-form__actions .button::before {
    font-size: 15px;
    content: 'Toot!';
}