/* BODY AND ROOT */
:root {
  --color-background: #3e3e3e;
  --color-background-subtle: #c8c8c8;
  --color-border-subtle: #cdd1d5;
  --color-border: #d7dee2;
  --color-header: #ddd;
  --color-header-buttons: #d5d1d1;
  --color-status: #faf7f7;
  --color-favorite: #dfdfdf;
  --color-reblog: #dfdfdf;
  --color-reply-muted: #e3e3e3;
}

body {
  background-color: var(--color-background);
}

.getting-started__trends
{
  background-color: var(--color-status);
}

/* LINKS */
a:any-link {
  text-decoration: none !important;
}

a.status-link {
  text-decoration: underline !important;
}

.status.status-public.muted {
 background-color: var(--color-reply-muted);
}

/* HEADER */
.tabs-bar__wrapper {
  background: var(--color-background);
}

.load-gap {
  border-bottom: 1px solid var(--color-border-subtle);
}

.column-header {
  border: 1px solid var(--color-border-subtle) 
}

h1.column-header {
  box-shadow: none;
  background: var(--color-header);
}

.column-header__buttons button.column-header__button {
  box-shadow: none;
  background-color: var(--color-header-buttons);
}


/* LEFT SIDEBAR */
.search__input {
  border: 1px solid var(--color-border-subtle);
  transition: var(--fbc-transition);
}

.search__input:hover,
.search__input:focus {
  border: 1px solid var(--color-border);
}

.search__input,
.search__input:focus {
  background-color: #ffffff;
}

.compose-form__autosuggest-wrapper,
.compose-form .compose-form__buttons-wrapper {
  border: 1px solid var(--color-border-subtle);
  transition: var(--fbc-transition);
}

.compose-form:hover .compose-form__buttons-wrapper,
.compose-form:focus-within .compose-form__buttons-wrapper {
  border: 1px solid var(--color-border);
}

.compose-form:hover .compose-form__autosuggest-wrapper,
.compose-form:focus-within .compose-form__autosuggest-wrapper{
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.compose-form .compose-form__buttons-wrapper {
  background-color: var(--color-background-subtle);
}

.compose-form__publish-button-wrapper button {
  opacity: 0.3;
  transition: var(--fbc-transition);
}

.compose-form:hover .compose-form__publish-button-wrapper button, 
.compose-form:focus-within .compose-form__publish-button-wrapper button {
  opacity: 1;
}

.emoji-picker-dropdown {
  display: none;
}


/* POSTS */
.status {
  border-bottom: 1px solid var(--color-border-subtle);
}

.status__wrapper {
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-status);
}

.status__content__text {
  max-width: 50ch;
}

.notification.notification-reblog.focusable {
  background-color: var(--color-reblog);
}

.notification.notification-favourite.focusable {
  background-color: var(--color-favorite);
}

.notification.notification-poll.focusable {
  background-color: var(--color-favorite);


/* RIGHT SIDEBAR */
.compose-panel hr, 
.navigation-panel hr {
  border-top: 1px solid var(--color-border-subtle);
}

.column > .scrollable {
  border: 1px solid var(--color-border-subtle);
}


/* FOOTER */
.link-footer {
  display: none;
}


{
  /*
    - Remove decorative background
    - Remove irritating animal
  */
  .drawer__inner__mastodon {
    background: none;
  }
  .drawer__inner__mastodon img {
    display: none;
  }
}

/*
  Scalable user interface based on the "Mastodon & Glitch-soc Variable Width" by SiinaCutie
  https://userstyles.org/styles/139721/mastodon-glitch-soc-variable-width
  Note: "Enable advanced web interface" has to be enabled for the styles to work properly.
  - Adjusts to remove horizontal scrollbar in smaller window size (e.g. 1280x1024)
*/
@media (min-width: 800px) {
  .wide .drawer {
    min-width: 280px;
  }
}

/*
  - Adjusts to use up space in larger window size (e.g. 1920x1080)
*/
@media (min-width: 1024px) {
  .columns-area > div {
    width: 25%;
    max-width: 25%;
  }

  .wide .drawer,
  .wide .column,
  .columns-area > div > .column,
  .columns-area > div > .mastodon-column-container > .column,
  .wide .columns-area:not(.columns-area--mobile) .column {
    max-width: 100%;
    flex: auto;
  }
}