@layer components {
  .media-annotation--general[data-annotation-kind] { opacity: 1; }
  /* Shape opacity never dims the selection frame or handles. */
  .media-annotation[data-annotation-kind] > :is(line, ellipse, circle, rect:not([data-annotation-selection])) {
    stroke-width: calc(var(--annotation-stroke) * 1px);
    stroke-opacity: calc(var(--annotation-opacity) / 100);
  }
  .media-annotation[data-filled="true"] > :is(ellipse, rect:not([data-annotation-selection])) {
    fill: currentColor;
    fill-opacity: calc(var(--annotation-fill-opacity) / 100);
  }
  .media-annotation[data-line-style="dashed"][data-annotation-kind] > :is(line, ellipse, rect:not([data-annotation-selection])) {
    stroke-dasharray: calc(var(--annotation-stroke) * 6) calc(var(--annotation-stroke) * 4);
  }
  .media-annotation[data-annotation-kind="highlight"] > rect:not([data-annotation-selection]) {
    stroke: none;
    fill: currentColor;
    fill-opacity: calc(var(--annotation-opacity) / 100);
  }
  .media-annotation[data-annotation-kind] > text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(var(--annotation-font-size) * 1px);
    font-weight: 400;
    fill: currentColor;
    fill-opacity: calc(var(--annotation-opacity) / 100);
    stroke: none;
    filter: none;
  }
  .media-annotation[data-annotation-kind="marker"] > text { fill: #fff; font-weight: 600; }
  .media-annotation[data-annotation-kind="marker"] > circle { fill-opacity: calc(var(--annotation-opacity) / 100); }
  .media-annotation[data-annotation-kind="tool"] > image { opacity: calc(var(--annotation-opacity) / 100); }
}