fizzy/app/assets/stylesheets/reactions.css

@layer components {
  .reactions {
    --btn-icon-size: 1.3em;
    --column-gap: 0.4ch;
    --reaction-border-color: var(--color-ink-lighter);
    --row-gap: 0;

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    inline-size: 100%;
    margin-block-start: calc(var(--block-space-half) / 2);
    margin-inline: calc(var(--column-gap) / -1);
  }

  .reactions__list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--column-gap);

    &:not(:has(.reaction)) {
      display: none;
    }
  }

  .reaction {
    --btn-size: 100%;
    --reaction-hover-brightness: 0.9;

    align-items: center;
    background-color: var(--color-canvas);
    block-size: var(--reaction-size);
    border: 1px solid var(--reaction-border-color);
    border-radius: 4rem;
    display: inline-flex;
    gap: var(--column-gap);
    max-inline-size: 100%;
    opacity: 1;
    padding: 0.1em 0.25em 0.1em 0.12em;
    postion: relative;
    transition: opacity 100ms ease-in-out, transform 150ms ease-in-out;

    .btn {
      font-size: 0.6em;
      inline-size: auto;
    }
  }

  .reaction--deleteable {
    cursor: pointer;

    @media (any-hover: hover) {
      &:not(:active):hover {
        filter: brightness(var(--reaction-hover-brightness));

        @media (prefers-color-scheme: dark) {
          --reaction-hover-brightness: 1.25;
        }
      }
    }
  }

  /* Make the avatar and delete buttons fit nicely within the reaction */
  .reaction__avatar,
  .reaction__form-label,
  .reaction form {
    block-size: var(--btn-size);
  }

  .reaction__delete {
    display: none;
    translate: 0.25em;

    .expanded & {
      display: grid;
    }
  }

  .reaction__form {
    transition: none;

    &.expanded {
      animation: react 300ms both;
      transform: translate3d(0, 0, 0);
      transform-origin: left center;
    }

    &:has(.input:focus) {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    .reaction__form-label:focus {
      outline: none;
    }
  }

  .reaction__input {
    --input-background: transparent;
    --input-border-size: 0;
    --input-padding: 0;

    box-shadow: none;
    display: inherit;
    max-inline-size: 16ch;
    min-inline-size: 2em;
    outline: 0;
  }

  .reaction--deleting {
    animation: scale-fade-out 0.2s both;
  }

  .reaction__action {
    --btn-border-color: var(--reaction-border-color);
    --btn-size: var(--reaction-size);

    font-size: 0.75em;

    .reactions:not(:has(.reaction)) & {
      display: none;
    }
  }

  /* Quick reactions
  /* ------------------------------------------------------------------------ */

  .quick-reaction {
    position: relative;
  }

  .quick-reaction__popup {
    --panel-border-radius: 1.2em;
    --panel-padding: 0.5ch;
    --offset: calc(-1 * var(--panel-padding));

    inset: var(--offset) auto auto var(--offset);
    min-inline-size: auto;
    transform: none;
  }

  .quick-reaction__emojis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .btn {
      --btn-icon-size: 1.5ch;
      --btn-size: var(--reaction-size);
      --btn-border-color: var(--color-canvas);

      position: relative;

      /* Make sure the selection ring sits on top of adjacent buttons on hover */
      &:hover,
      &:focus-visible {
        z-index: 1;
      }
    }
  }
}