/* trans pride filter wrappers */

.content-warning--filter::before,
.content-warning--filter::after {
background: linear-gradient(to bottom, rgba(91,206,250,1) 0%, rgba(245,169,184,1) 28%, rgba(255,255,255,1) 50%, rgba(245,169,184,1) 72%, rgba(91,206,250,1) 100%);
}

/* make content wrappers gay again */

.content-warning:not(.content-warning--filter)::before,
.content-warning:not(.content-warning--filter)::after,
.compose-form .spoiler-input__border {
    background: linear-gradient(
        to bottom,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

/* add scroll bar to reply preview if you're replying to a long post
*/

/*.compose-form .reply-indicator__content {
/*   overflow: scroll;
/*    max-height: fit-content;
/*}

/*.reply-indicator__main .reply-indicator__content {
/*    display: inline;
/*}

/* remove the truncation of paragraphs after the first in some notifications, using an ellipsis instead to denote there's more to read*/

.notification-group__embedded-status__content p {
display: block;
}

/* emoji embiggening */

.edit-indicator__content .emojione, .reply-indicator__content .emojione, .status__content .emojione {
    height: 24px;
    width: 24px;
}

.detailed-status .status__content .emojione {
    height: 28px;
    width: 28px;
}


/* emoji button
 * sets the emoji button back in the top right
 * thanks Zoë!
 */

.compose-form__highlightable {
	position: relative;
}

.compose-form .autosuggest-textarea__textarea {
	padding-right: 24px;
}

.compose-form__buttons [aria-label*="emoji"] {
	position: absolute;
	top: .5rem;
	right: .5rem;
}
.edit-indicator__cancel {
   position: relative;
   right: 1.1rem;
}

/* Compose form
 * Why are the buttons inside? Why?
 * thanks Zoë!
 */

.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;
    }

/* gradient scrollbar */

::-webkit-scrollbar-thumb {
   background: linear-gradient(to bottom, rgba(66,58,69,1) 0%, rgba(132,111,145,1) 28%, rgba(129,104,140,1) 52%, rgba(132,111,145,1) 72%, rgba(66,58,69,1) 100%);
    ); !important;
}

/* 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: 1px solid #3f3f8d;
    }

/* 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: #111715;
}

body.theme-default .column, body.theme-default .drawer {
    background: #1c2327;
}

/* 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!';
    }

/* 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;
}


/* Removes the 'hazard' strip from the account warning notification when viewing a report */
.account-card__warning-badge {
    background: none;
}


a.status-link:not(.mention) {
  text-decoration: underline;
}

.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]), 
.media-gallery__gifv video:not([title]),
.media-gallery__item-thumbnail img[alt=""], .audio-player__canvas[title=""], .video-player video[title=""], .media-gallery__gifv video[title=""]

 {
    border: 3px dashed #1da1f2;
    box-sizing: border-box;
}


.status__wrapper-direct::before {
content: "";
background: #bb6eb9;
width: 4px;
height: 100%;
display: block;
position: absolute;
}