/* 
Mastodon v4.3 Obsidian Light Theme
author: @timotheegoguely@mastodon.design
last update: 2024-12-10 11:05
*/

:root {
  --primary-color: #6364ff; /* $blurple-500 Brand Purple */
  --primary-color-hover: #563acc; /* $blurple-600 Iris */
  --icon-color: #9c9cc9;
  --icon-color-hover: #fff;
}

/* Set drawer min-width to 310px max-width to 400px */
.drawer {
  width: 310px;
  max-width: 400px;
}

/* Responsive columns layout */
@media screen and (min-width: 630.02px) {
  .column, .drawer {
    flex: 1 0 auto;
  }
  .column {
    width: clamp(310px, calc((100% - 400px) / 4), 400px);
  }
}

/* Increase expanded status card titles and descriptions visible lines from 1 to 4 */
.status-card.expanded .status-card__title,
.status-card.expanded .status-card__description {
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Use variables for drawer and status card image icons color */
.drawer__tab,
.status-card__image {
  color: var(--icon-color);
}
.drawer__header a:active,
.drawer__header a:focus,
.drawer__header a:hover {
  color: var(--icon-color-hover);
}

/* Content warning */
.content-warning {
  border-radius: 4px;
}
.content-warning::before,
.content-warning::after {
  background: var(--primary-color);
}

/* Reduce some icons contrast */
.column-link__icon,
.column-header__icon,
.account__section-headline a,
.account__section-headline button,
.notification__filter-bar a,
.notification__filter-bar button {
  color: var(--icon-color);
}

/* Add border arround announcements and adjust background color */
.announcements {
  background: var(--surface-background-color);
  border-inline: 1px solid var(--background-border-color);
}

/* Adjust reactions bar buttons background color */
.reactions-bar__item {
  background: var(--surface-variant-background-color);
}
.reactions-bar__item:hover,
.reactions-bar__item:active {
  background: var(--surface-variant-active-background-color);
}

/* Make scrollbar background transparent */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: rgba(96,96,133,.25) transparent;
  }
}


/* Light theme
---------------------------------------------------------------------------- */

/* Color variables */
.theme-mastodon-light {
  --dropdown-border-color: #E0E0E0;
  --dropdown-background-color: #F6F6F6;
  --modal-border-color: #E0E0E0;
  --modal-background-color: var(--background-color-tint);
  --background-border-color: #E0E0E0;
  --background-color: #F6F6F6;
  --background-color-tint: hsla(0,0%,100%,.8);
  --on-surface-color: rgba(221,217,232,.35);
  --icon-color: #606085;
  --icon-color-hover: #000;
}
/* Adjust some background colors */
.theme-mastodon-light .status-card__image,
.theme-mastodon-light .column-subheading,
.theme-mastodon-light .hashtag-bar a,
.theme-mastodon-light .icon-button:active,
.theme-mastodon-light .icon-button:focus,
.theme-mastodon-light .icon-button:hover {
  background: var(--on-surface-color);
}

.theme-mastodon-light .status__wrapper-direct,
.theme-mastodon-light .notification-group--direct,
.theme-mastodon-light .notification-ungrouped--direct {
  background: rgba(97,97,255,.05);
}
.theme-mastodon-light [class*="notification-"] .status__wrapper-direct {
  background: transparent;
}
.theme-mastodon-light .detailed-status__wrapper-direct .detailed-status,
.theme-mastodon-light .detailed-status__wrapper-direct .detailed-status__action-bar {
  background: rgba(97,97,255,.1);
}
.theme-mastodon-light .detailed-status__wrapper-direct:focus .detailed-status, 
.theme-mastodon-light .detailed-status__wrapper-direct:focus .detailed-status__action-bar {
  background: rgba(97,97,255,.15);
}

/* Reduce Mastodon mascot opacity */
.theme-mastodon-light .drawer__inner__mastodon {
  opacity: .6;
}