/*
 * A trigger: text that opens something on the same page — a criterion's
 * editor, a filter panel. A dashed underline says "this does something here"
 * where a solid one says "this goes somewhere". From `trigger_classes`.
 */
@layer components {
  .trigger {
    color: var(--color-link);
    border-block-end: var(--rule-width) dashed currentColor;
    border-radius: 0;
    cursor: pointer;
    transition: color var(--duration-fast);

    &:hover {
      color: var(--color-link-hover);
    }
  }

  .trigger--danger {
    color: var(--color-loss);

    &:hover {
      color: color-mix(in srgb, var(--color-loss) 80%, var(--color-ink));
    }
  }

  .trigger--inverse {
    color: var(--color-ink-inverse);

    &:hover {
      color: var(--color-surface-sunken);
    }
  }
}