// Anywhere a link will go to a user, color it $green
a.link-user,
a.site-header-context[href^='/user'] {
  color: $green;

  &:visited {
    color: $green;
  }
}

// Anywhere a link will go to a group, color it $orange
a.link-group,
a.site-header-context[href^='/~'],
.nav .nav-item a[href^='/~'] {
  color: $orange;

  &:visited {
    color: $orange;
  }
}

.group-list-item-subscribed a.link-group {
  color: $cyan;
}

.group-list-item-not-subscribed a.link-group {
  color: $yellow;
}

// Make sure the logo hover keeps the $foreground color, otherwise it would be pink from _anchors.scss
a.site-header-logo:hover {
  color: $foreground;
}

a.logged-in-user-alert,
a.logged-in-user-alert:visited {
  color: $background;
  @include background-hover($orange, $yellow);
  padding: 0.1rem 0.3rem;
}

// The logout button is actually a <button/> instead of an <a/> so we gotta reset the style
#sidebar {
  form[action='/logout'] > button,
  form[action='/logout'] > button:hover {
    color: $cyan;
    border: none;
    background-color: transparent;
  }
}

// "Edit filtered tags" button in the sidebar
#sidebar .btn.btn-link[href='/settings/filters'] {
  width: 100%;
  margin: 0.2rem 0;
}

// Target all label-topic-tags expect spoiler and nsfw ones
.label.label-topic-tag:not([class*='label-topic-tag-spoiler']):not([class*='label-topic-tag-nsfw']) {
  color: $comment;

  a {
    @include color-hover($comment, $pink);
  }
}

.divider {
  border-color: $foreground;
}

// Very specific target for the Tildes brand logo at the top
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
& > header > a:nth-child(1):not(.no-header-logo) {
  color: $foreground;
  background-size: 32px 32px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAHlBMVEUoKjZQ+nticqSL6f29k/nx+oz/VVX/ecb/uGz///+3yBn7AAAAaklEQVR42u3Oxw2AQAADsNDZf2IGyO8kioQ9gQMAAAAAcLelCAkJCQkJCQkJ/Tk0lZS5ZMhZhISEhISEhISEvhbaSoasJWUvKUJCQkJCQkJCQu+GnnSUFCEhISEhISEhoXdDAAAAAAA3uwDrCC2R1NNC7QAAAABJRU5ErkJggg==');
}

.form-status-success {
  color: $green;
}

.form-status-error {
  color: $red;
}

.donation-goal {
  meter {
    background-color: $background;
  }
}