@layer components {
  /* Custom attachments such as mentions, etc. */
  action-text-attachment[content-type^='application/vnd.actiontext'] {
    --attachment-bg-color: transparent;
    --attachment-image-size: 1em;
    --attachment-text-color: currentColor;

    align-items: center;
    background: var(--attachment-bg-color);
    border-radius: 99rem;
    box-shadow:
      -0.25ch 0 0 var(--attachment-bg-color),
       0.5ch 0 0 var(--attachment-bg-color);
    color: var(--attachment-text-color);
    display: inline-flex;
    gap: 0.25ch;
    margin: 0;
    padding: 0;
    position: relative;
    vertical-align: bottom;
    white-space: normal;

    lexxy-editor & {
      cursor: pointer;
    }

    img {
      block-size: var(--attachment-image-size);
      border-radius: 50%;
      inline-size: var(--attachment-image-size);
    }

    &.node--selected {
      --attachment-bg-color: oklch(var(--lch-blue-dark));
      --attachment-text-color: var(--color-ink-inverted);
    }
  }

  action-text-attachment[content-type^='application/vnd.actiontext.mention'] {
    img {
      object-fit: cover;
    }
  }
}