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);

    &:has([open]) {
      z-index: var(--z-popup);
    }

    &:not(:has(.reaction)) {
      inline-size: auto;
      inset-block-end: var(--comment-padding-block);
      inset-inline-end: calc(var(--comment-padding-inline) / 2);
      margin: 0;
      position: absolute;

      .reactions__list {
        display: none;
      }

      .reactions__trigger {
        --btn-border-color: var(--color-ink-lightest);
        background-color: var(--color-ink-lightest);

        &:not(:hover) {
          opacity: 0.66;
        }
      }
    }
  }

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

    img {
      block-size: 65%;
      inline-size: 65%;
    }
  }

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

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

  /* Single reaction
  /* -------------------------------------------------------------------------- */

  .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: 0.25ch;
    max-inline-size: 100%;
    opacity: 1;
    padding: 0.1em 0.36em 0.1em 0.12em;
    position: relative;
    transition: opacity 100ms ease-in-out, transform 150ms ease-in-out;

    &:has(span.txt-small.txt-medium) { /* emoji only reactions */
      padding: 0.1em 0.12em;
    }

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

  .reaction--deleteable {
    cursor: pointer;

    @media (any-hover: hover) {
      &:not(.expanded):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;

    .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: -1px;
    }

    .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__menu-btn,
  .reaction__submit-btn,
  .reaction__cancel-btn {
    --btn-size: 1.25rem;
    --icon-size: var(--btn-size);
  }

  .reaction__submit-btn {
    color: oklch(var(--lch-green-dark));
  }

  .reaction__cancel-btn {
    color: oklch(var(--lch-red-dark));
  }


  /* Menu
  /* ------------------------------------------------------------------------ */

  .reaction__menu {
    position: relative;
  }

  .reaction__popup {
    --panel-border-radius: 1em;
    --panel-padding: var(--block-space-half) var(--inline-space);
    --offset: calc(-1 * var(--panel-padding));

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

  .reaction__emoji-list {
    display: grid;
    gap: var(--inline-space-half);
    grid-template-columns: repeat(10, 1fr);

    @media (max-width: 639px) {
      grid-template-columns: repeat(6, 1fr);
    }

    .btn {
      --btn-size: calc(1.3rem * 1.3);

      font-size: 1.3rem;
      position: relative;

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

      &:hover {
        scale: 1.3;
      }
    }
  }
}