/* Generic visual feedback for hover and active cards */
.hover-active-darken {
  --filter-hover: brightness(93.5%);
  --filter-active: brightness(87%);

  &:hover {
    filter: var(--filter-hover);
  }

  &:active {
    filter: var(--filter-active);
  }
}

@screen dark {
  .hover-active-darken {
    --filter-hover: brightness(125%);
    --filter-active: brightness(75%);
  }
}

/*
  Upwards-pointing arrow (used for comment replies).
  See <https://css-tricks.com/snippets/css/css-triangle/> for details on
  how this works.
*/
.arrow-up {
  border-width: 0.75rem;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

/*
  Used to denote that a certain element has a tooltip associated
  (using the balloon.css library).
*/
.has-tooltip {
  text-decoration: underline;
  text-decoration-style: dotted;
}

/*
  Fade out the Remove button unless the review is being hovered
  (to be less distracting).
*/
.review .remove-review {
  opacity: 0.25;
}

.review:hover .remove-review {
  opacity: 0.75;
}
