/* Gruvbox Dark for Mastodon */
:root {
  --gruvbox-bg0-hard: #1d2021;
  --gruvbox-bg0: #282828;
  --gruvbox-bg1: #3c3836;
  --gruvbox-bg2: #504945;
  --gruvbox-bg3: #665c54;
  --gruvbox-fg0: #fbf1c7;
  --gruvbox-fg1: #ebdbb2;
  --gruvbox-fg2: #d5c4a1;
  --gruvbox-fg3: #bdae93;
  --gruvbox-fg4: #a89984;
  --gruvbox-red: #fb4934;
  --gruvbox-green: #b8bb26;
  --gruvbox-yellow: #fabd2f;
  --gruvbox-blue: #83a598;
  --gruvbox-purple: #d3869b;
  --gruvbox-aqua: #8ec07c;
  --gruvbox-orange: #fe8019;
}
/* Base */
body,
.admin-wrapper,
.public-layout,
.public-layout .container,
.columns-area,
.ui,
.drawer,
.drawer__inner,
.drawer__header,
.column,
.column > .scrollable,
.column-header,
.column-header__wrapper,
.account__header,
.account__section-headline,
.status,
.detailed-status,
.detailed-status__action-bar,
.notification,
.conversation,
.directory__tag,
.box-widget,
.simple_form,
.card,
.table,
.batch-table,
.filters,
.regeneration-indicator,
.missing-indicator,
.error-boundary,
.empty-column-indicator {
  background-color: var(--gruvbox-bg0-hard) !important;
  color: var(--gruvbox-fg1) !important;
}
/* Panels */
.drawer__inner,
.column,
.column-header,
.column-header__wrapper,
.account__section-headline,
.status,
.detailed-status,
.notification,
.conversation,
.box-widget,
.card,
.table,
.batch-table,
.admin-wrapper .content,
.admin-wrapper .sidebar,
.admin-wrapper .content h2,
.admin-wrapper .content h3 {
  border-color: var(--gruvbox-bg2) !important;
}
/* Secondary surfaces */
.drawer__inner__mastodon,
.compose-form,
.compose-form .autosuggest-textarea__textarea,
.search__input,
.column-subheading,
.load-more,
.status-card,
.attachment-list,
.account,
.account-card,
.admin-wrapper .sidebar-wrapper,
.admin-wrapper .content,
.admin-wrapper .filters,
.admin-wrapper .simple_form,
.admin-wrapper .table-wrapper,
.admin-wrapper .batch-table__toolbar,
.admin-wrapper .report-notes__item {
  background-color: var(--gruvbox-bg0) !important;
  color: var(--gruvbox-fg1) !important;
}
/* Inputs */
input,
textarea,
select,
.input,
.search__input,
.compose-form .autosuggest-textarea__textarea,
.compose-form__poll-wrapper,
.admin-wrapper input,
.admin-wrapper textarea,
.admin-wrapper select {
  background-color: var(--gruvbox-bg1) !important;
  color: var(--gruvbox-fg1) !important;
  border-color: var(--gruvbox-bg3) !important;
}
input::placeholder,
textarea::placeholder,
.search__input::placeholder {
  color: var(--gruvbox-fg4) !important;
}
/* Text */
p,
span,
label,
td,
th,
.status__content,
.status__content p,
.reply-indicator__content,
.account__display-name,
.display-name,
.display-name__html,
.admin-wrapper,
.admin-wrapper p,
.admin-wrapper td,
.admin-wrapper th,
.admin-wrapper label {
  color: var(--gruvbox-fg1) !important;
}
.status__relative-time,
.status__display-name,
.status__prepend,
.account__username,
.display-name__account,
.muted,
.hint,
.help-block,
.admin-wrapper .hint,
.admin-wrapper .muted-hint {
  color: var(--gruvbox-fg4) !important;
}
/* Links */
a,
.status__content a,
.reply-indicator__content a,
.account__display-name strong,
.column-link,
.admin-wrapper a {
  color: var(--gruvbox-blue) !important;
}
a:hover,
.status__content a:hover,
.admin-wrapper a:hover {
  color: var(--gruvbox-aqua) !important;
}
/* Buttons */
button,
.button,
.icon-button,
.text-icon-button,
.admin-wrapper .button,
.simple_form button,
.simple_form .button {
  background-color: var(--gruvbox-bg1) !important;
  color: var(--gruvbox-fg1) !important;
  border-color: var(--gruvbox-bg3) !important;
}
button:hover,
.button:hover,
.icon-button:hover,
.text-icon-button:hover,
.admin-wrapper .button:hover {
  background-color: var(--gruvbox-bg2) !important;
  color: var(--gruvbox-fg0) !important;
}
.button.button-primary,
.simple_form .button,
.admin-wrapper .button.positive,
.admin-wrapper .button.button-primary {
  background-color: var(--gruvbox-yellow) !important;
  color: var(--gruvbox-bg0-hard) !important;
  border-color: var(--gruvbox-yellow) !important;
}
.button.button-primary:hover,
.simple_form .button:hover,
.admin-wrapper .button.positive:hover,
.admin-wrapper .button.button-primary:hover {
  background-color: var(--gruvbox-orange) !important;
  border-color: var(--gruvbox-orange) !important;
}
/* Icons and actions */
.icon-button,
.status__action-bar-button,
.detailed-status__button,
.column-header__button,
.drawer__tab,
.compose-form__buttons .icon-button {
  color: var(--gruvbox-fg4) !important;
}
.icon-button.active,
.icon-button:hover,
.status__action-bar-button:hover,
.detailed-status__button:hover,
.column-header__button:hover,
.drawer__tab:hover {
  color: var(--gruvbox-yellow) !important;
}
/* Boost/favourite colors */
.icon-button.star-icon.active,
.status__action-bar-button.star-icon.active {
  color: var(--gruvbox-yellow) !important;
}
.icon-button.active i.fa-retweet,
.status__action-bar-button.active i.fa-retweet {
  color: var(--gruvbox-green) !important;
}
/* Navigation */
.tabs-bar,
.tabs-bar__link,
.column-header,
.column-header__back-button,
.admin-wrapper .sidebar ul a {
  background-color: var(--gruvbox-bg0) !important;
  color: var(--gruvbox-fg2) !important;
  border-color: var(--gruvbox-bg2) !important;
}
.tabs-bar__link.active,
.tabs-bar__link:hover,
.admin-wrapper .sidebar ul a.selected,
.admin-wrapper .sidebar ul a:hover {
  background-color: var(--gruvbox-bg1) !important;
  color: var(--gruvbox-yellow) !important;
}
/* Dropdowns and modals */
.dropdown-menu,
.dropdown-menu__container,
.dropdown-menu__item,
.modal-root__modal,
.modal-layout,
.boost-modal,
.confirmation-modal,
.actions-modal,
.report-modal,
.block-modal {
  background-color: var(--gruvbox-bg0) !important;
  color: var(--gruvbox-fg1) !important;
  border-color: var(--gruvbox-bg2) !important;
}
.dropdown-menu__item:hover,
.dropdown-menu__item:focus {
  background-color: var(--gruvbox-bg1) !important;
  color: var(--gruvbox-yellow) !important;
}
/* Tables */
table,
thead,
tbody,
tr,
td,
th,
.admin-wrapper table,
.admin-wrapper thead,
.admin-wrapper tbody,
.admin-wrapper tr,
.admin-wrapper td,
.admin-wrapper th {
  background-color: var(--gruvbox-bg0) !important;
  color: var(--gruvbox-fg1) !important;
  border-color: var(--gruvbox-bg2) !important;
}
tr:hover,
.admin-wrapper tr:hover {
  background-color: var(--gruvbox-bg1) !important;
}
/* Alerts */
.flash-message,
.positive-hint,
.warning-hint,
.negative-hint {
  color: var(--gruvbox-bg0-hard) !important;
}
.flash-message.notice,
.positive-hint {
  background-color: var(--gruvbox-green) !important;
}
.flash-message.alert,
.negative-hint {
  background-color: var(--gruvbox-red) !important;
}
.warning-hint {
  background-color: var(--gruvbox-yellow) !important;
}
/* Scrollbars */
* {
  scrollbar-color: var(--gruvbox-bg3) var(--gruvbox-bg0-hard);
}