.compose-form__publish-button-wrapper button, .ui__header__links .button {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.compose-form__publish-button-wrapper button:after, .ui__header__links .button:after {
  content:'Toot!'; 
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}



/******************************************************************************\
 *                    Web Client: Condense Favs and Boosts in Notifications   *
\******************************************************************************/
/* Set the containers to contain elements set with position:absolute */
.notification-favourite,
.notification-reblog,
.notification-poll,
.notification-update{
    position: relative !important;
}

/* Condense and de-emphasize notifications for favourites, reblogs, and polls */
.notification-favourite .notification__message,
.notification-reblog .notification__message,
.notification-poll .notification__message,
.notification-status  .notification__message,
.notification-update .notification__message {
    line-height: 100%;
    font-size: 100%;
    opacity: 0.5;
    margin-left: 15px;
    z-index: 100;
}

/* Adjust position of favorite icon to make more efficient use of space */
.notification-favourite .notification__favourite-icon-wrapper,
.notification-reblog .notification__favourite-icon-wrapper,
.notification-poll .notification__favourite-icon-wrapper,
.notification-update .notification__favourite-icon-wrapper {
    position: absolute;
    left: 4px;
    top: 15px;
    padding-right: 0px;
}

/* Shifts user icon up to match smaller username text */
.notification-favourite .account__avatar-overlay-overlay,
.notification-reblog .account__avatar-overlay-overlay,
.notification-poll .account__avatar-overlay-overlay,
.notification-update .account__avatar-overlay-overlay {
    bottom: 5px;
}

/* Notification Name Container */
.notification__message > span {
    display: block;
}

/* Forces shortening of display names, forcing to two lines */
.notification-favourite .notification__message .notification__display-name,
.notification-reblog .notification__message .notification__display-name,
.notification-poll .notification__message .notification__display-name,
.notification-update .notification__message .notification__display-name {
    display: block;
    position: relative;
    margin-right: 0px;
    padding-right: 27px;
    left: 0px;
    overflow: hidden;
    width: auto;
    white-space: nowrap;
    font-weight: bold;
    font-size: 115%;
    text-overflow: ellipsis;
}

/* No spacing for single column*/
.layout-single-column .notification-favourite .notification__message .notification__display-name,
.layout-single-column .notification-reblog .notification__message .notification__display-name,
.layout-single-column .notification-poll .notification__message .notification__display-name ,
.layout-single-column .notification-update .notification__message .notification__display-name {
    margin-right: 0px;
    min-width: 20px;
    width: auto;
}

/* Smaller favorite text */
.notification-favourite .notification__message span span,
.notification-reblog .notification__message span span,
.notification-poll  .notification__message span span,
.notification-update .notification__message span span {
    font-weight: normal;
    font-size: 90%;
    display: block;
    margin-left: 19px;
}


/* Hide the @user mention text on closed cws */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention {
    position: absolute;
    display: none;
    top: -10px;
    width: 80px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
}
/* @user mention preview: first mention */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention:first-child {
    right: 0px;
    display: block;
}
/* @user mention preview: second mention */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention:nth-child(2) {
    right: 82px;
    display: block;
}
/* Change container overflow setting to allow the @user mention text to shift up higher */
.muted .status__content.status__content--with-action.status__content--with-spoiler {
    overflow: visible;
}
/* Wrap @user mention text with parenthesis */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention:before {
    content: "(";
    display: inline;
}
/* Wrap @user mention text with parenthesis */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention:after {
    content: ")";
    display: inline;
}


/* Reset @user mention text when open */
.muted .status__content.status__content--with-action.status__content--with-spoiler div.status__content__text--visible a.status-link.mention {
    position: static;
    display: inline;
    font-size: inherit;
}
/* Wrap @user mention text with parenthesis */
.muted .status__content.status__content--with-action.status__content--with-spoiler div.status__content__text--visible a.status-link.mention:before {
    content: "";
}
/* Wrap @user mention text with parenthesis */
.muted .status__content.status__content--with-action.status__content--with-spoiler div.status__content__text--visible a.status-link.mention:after {
    content: "";
}




/* But show it on open cws */
.muted .status__content.status__content--with-action.status__content--with-spoiler div span a.status-link.mention {
    display: inline;
}

/* Overrides larger min-height to make things extra smol */
.notification div.status {
    min-height: 20px;
    max-height: 50px;
    overflow: hidden;
    padding: 10px 10px;
    margin-left: 5px;
    padding-top: 5px;
}


/* Make the "Show More" button extra smol to fit in-line with text */
.notification div.status.muted .status__content__spoiler-link {
    transform: scale(0.7);
}

/* Hides the action bar since it's mostly useless on these notifications */
.notification div.status.muted .display-name,
.notification div.status.muted .account__avatar-overlay-base,
.notification div.status.muted .attachment-list.compact,
.notification div.status.muted .status__action-bar,
.notification div.status.muted .status-card,
.notification div.status.muted .status__expand {
    display: none !important;
}

/* Disables click on own profile of muted messages */
.notification div.status.muted .status__display-name {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}


/* Forces the account avatar container to be extra smol */
.notification div.status.muted .account__avatar-overlay,
.notification div.status.muted .status__avatar {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 24px !important;
}

/* Put the mini avatar where it belongs - top left */
.notification div.status.muted .status__avatar {
    top: 10px;
    left: 10px;
}

/* Force toot content to a couple of much smaller lines */
.notification div.status.muted .status__content p {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: none !important;
    max-width: 95%;
    font-size: 12px;
    margin-bottom: 0px;
}

/* Show only the first paragraph of a status */
.notification div.status.muted .status__content p:first-child {
    display: block !important;
    max-height: 40px;
}

/* Emojos in notifications (non-replies) */
.notification .status__content .emojione {
    width: 15px;
    /* Stock is 20px */
    height: 15px;
    /* Stock is 20px */
}


/* Section displaying time and privacy, moved to upper-right (includes avatar somehow) */
.notification.notification-reblog .status__info,
.notification.notification-favourite .status__info,
.notification.notification-poll .status__info,
.notification.notification-status .muted .status__info,
.notification.notification-update .muted .status__info {
    position: absolute;
    top: -30px;
    right: 10px;
    width: calc(100% - 20px);
    pointer-events: none;
}
/* Post Time display */
.notification .muted .status__relative-time {
    font-size: 12px;
}

/******************************************************************************\
 *               End Web Client: Condense Favs and Boosts in Notifications   *
\******************************************************************************/

.user-role-2 {
  --user-role-accent: #000000;
  --user-role-background: #00000019;
  --user-role-border: #00000080;
}

.user-role-1 {
  --user-role-accent: #8080c0;
  --user-role-background: #8080c019;
  --user-role-border: #8080c080;
}