@layer components {
  /* Container */
  .boosts {
    --boost-background-color: var(--color-body);
    --boost-border-color: var(--color-ink-lighter);
    --boost-border-color-hover: var(--color-ink-light);
    --column-gap: 0.4ch;
  }

  /* Item */
  .boost {
    background-color: var(--boost-background-color);
    border: 1px solid var(--boost-border-color);
    border-radius: 4rem;
    margin-block-start: calc(var(--block-space-half) / 2);
    opacity: 1;
    padding: 0.1em 0.2em 0.1em 0.1em;
    transition: opacity 100ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out;

    .boost__action {
      margin-block-start: 0;
    }

    .btn:not(.avatar) {
      font-size: 0.5rem;
    }

    @media (any-hover: hover) {
      &:where(:not(:active):hover) {
        --boost-border-color: var(--boost-border-color-hover);

        box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
      }
    }

    &:has(.input--boost):focus-within {
      --boost-border-color: var(--color-selected-dark);
      --hover-color: var(--color-selected-dark);

      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
    }
  }

  .btn:is(.boost__action) {
    --btn-border-color: var(--boost-border-color);
    font-size: 0.5em;
    margin-block-start: calc(var(--block-space-half) / 2);



    @media (any-hover: hover) {
      &:where(:not(:active):hover) {
        --boost-border-color: var(--color-border-darker)
      }
    }
  }

  .btn:is(.boost__delete) {
    display: none !important;

    .expanded & {
      display: flex !important;
    }
  }

  .boost__avatar {
    inline-size: auto;

    .avatar {
      block-size: 1.75ch;
      inline-size: 1.75ch;
    }
  }

  .boost__form {
    transition: none;

    &.expanded {
      animation: boost 0.2s both;
      transform: translate3d(0, 0, 0);
    }

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

    .input--boost {
      --hover-size: 0;
      --input-background: transparent;
      --input-border-size: 0;
      --input-padding: 0;
      --outline-size: 0;

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

  /* Variants */
  .boost--deleting {
    animation: scale-fade-out 0.2s both;
  }

  /* Reactions */
  .quick-boosts {
    --column-gap: var(--inline-space-half);
    --row-gap: var(--block-space-half);
    display: grid;
    grid-template-columns: repeat(4, var(--btn-size));
    justify-content: center;

    .btn {
      aspect-ratio: 1;
      block-size: var(--btn-size);
      inline-size: var(--btn-size);
    }
  }

  .boost-character {
    font-size: 1.3rem;
  }
}