/* Compose form
 * Why are the buttons inside? Why?
 */
.compose-form__highlightable {
    border: 0;
    background: #27213b;
    padding: 10px;
}
 
.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-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: 10px solid #181824;
    }
 
/* 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: #181824;
}
 
body.theme-default .column, body.theme-default .drawer {
background: #27213b;
}
 
/* 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!';
    }
 
/* Changes the background of columns in the Light theme to be light grey instead of white, to reduce stark contrast */
 
body.theme-mastodon-light {
  background: #fbfbfb;
}
 
/* Changes the 'hazard' strip bordering content warnings to be a rainbow gradient instead */
 
.content-warning::before,
.content-warning::after,
.compose-form .spoiler-input__border {
    background: linear-gradient(
        to bottom,
        rgba(252, 40, 3, 1) 0%,
        rgba(252, 98, 3, 1) 100%
    );
}
 
/* Removes the 'hazard' strip from the account warning notification when viewing a report */
.account-card__warning-badge {
    background: none;
}