@layer components {
  .reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    align-items: center;
  }

  .reactions__item {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--color-ink-lightest);

    @media (any-hover: hover) {
      &:hover {
        background-color: oklch(var(--lch-blue-lighter));
      }
    }
  }

  .reactions__item--active {
    outline: 2px solid var(--color-theme-blue-lighter);
    outline-offset: -2px;
  }

  .reactions__item--active .reactions__count,
  .reactions__toggle--active {
    background-color: oklch(var(--lch-blue-lightest));
  }

  .reactions__item form {
    margin: 0;
    display: flex;
  }

  .reactions__toggle {
    border: 0;
    background: transparent;
    padding: 0.2em 0.5em;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    transition: background-color 0.15s;
  }

  .reactions__toggle--active {
    background-color: oklch(var(--lch-blue-lightest));
  }

  .reactions__count {
    border: 0;
    border-inline-start: 1px solid var(--color-ink-lighter);
    background: transparent;
    padding: 0.2em 0.6em;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--color-ink);
  }

  .reactions__popover {
    inline-size: min(30ch, 90vw);
    max-block-size: 60vh;
    overflow-y: auto;
    padding: var(--block-space);
    border: 1px solid var(--color-ink-lighter);
  }

  .reactions__popover::backdrop {
    background: rgb(0 0 0 / 0.3);
  }

  .reactions__popover-close {
    position: absolute;
    inset-block-start: var(--block-space-half);
    inset-inline-end: var(--block-space-half);
  }

  .reactions__reactors {
    padding-inline-start: 0;
  }

  .reactions__more {
    border: 1px dashed var(--color-ink-lighter);
    border-radius: 999px;
    background: transparent;
    padding: 0.2em 0.7em;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    color: var(--color-ink);
    transition: background-color 0.15s;
  }

  @media (any-hover: hover) {
    .reactions__more:hover {
      background-color: oklch(var(--lch-blue-lighter));
    }
  }

  .reactions__extras {
    display: flex;
    align-items: center;
    gap: 0.25em;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.3s ease-in, opacity 0.2s ease-in;
  }

  .reactions__extras.is-expanded {
    max-width: 30em;
    opacity: 1;
    transition: max-width 0.9s ease-out, opacity 0.6s ease-out;
  }
}