/* Message reactions / boosts */
.boosts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  inline-size: 100%;
}

.boosts__list {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-inline-size: 0;
}

.boost {
  --boost-background: var(--color-text-reversed);
  --boost-border-color: var(--color-border-dark);
  --boost-color: var(--color-text);

  align-items: center;
  background: var(--boost-background);
  border: 1px solid var(--boost-border-color);
  border-radius: 999px;
  color: var(--boost-color);
  column-gap: 0.35rem;
  cursor: pointer;
  display: inline-flex;
  line-height: 1;
  margin-block-start: calc(var(--block-space-half) / 2);
  max-inline-size: min(100%, 28ch);
  min-block-size: 2rem;
  padding: 0.12rem 0.38rem 0.12rem 0.12rem;
}

.boost:where(:not(:active):hover) {
  --boost-border-color: var(--color-border-darker);

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

.boost.expanded {
  max-inline-size: min(100%, 36ch);
}

.boost > form {
  display: none;
  margin: 0;
}

.boost.expanded > form {
  display: inline-flex;
}

.boost--deleting {
  opacity: 0.55;
}

.boost__avatar {
  --avatar-size: 1.55rem;

  flex: 0 0 auto;
}

.boost__content {
  color: inherit;
  display: inline-block;
  font-size: calc(0.78rem * var(--user-font-scale, 1));
  font-weight: 650;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boost__content--emoji {
  font-size: calc(1rem * var(--user-font-scale, 1));
}

.boost__delete,
.boost__form-button,
.boost__action {
  align-items: center;
  appearance: none;
  background: var(--boost-action-background, var(--color-text));
  border: 1px solid var(--boost-action-border-color, transparent);
  border-radius: 999px;
  color: var(--boost-action-color, var(--color-text-reversed));
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  min-block-size: 2rem;
  min-inline-size: 2rem;
  padding: 0.25rem;
  text-decoration: none;
}

.boost__delete img,
.boost__form-button img,
.boost__action img {
  block-size: 1rem;
  filter: var(--boost-action-icon-filter, var(--btn-icon-filter-dark, invert(0%)));
  inline-size: 1rem;
}

.boost__delete {
  --boost-action-background: var(--color-negative);

  display: none;
}

.boost.expanded .boost__delete {
  display: inline-flex;
}

.boost__action {
  --boost-action-background: var(--color-text-reversed);
  --boost-action-border-color: var(--color-border-dark);
  --boost-action-color: var(--color-text);
  --boost-action-icon-filter: var(--btn-icon-filter, invert(100%));

  margin-block-start: calc(var(--block-space-half) / 2);
}

.boost--new {
  cursor: default;
  max-inline-size: min(100%, 34ch);
  padding-inline-end: 0.22rem;
}

.boost__form {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  min-inline-size: 0;
}

.boost__form-label {
  align-items: center;
  cursor: text;
  display: inline-flex;
  gap: 0.45rem;
  min-inline-size: 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;
  color: var(--boost-color);
  max-inline-size: 16ch;
  min-inline-size: 2em;
  outline: 0;
}

.boost__form-button--cancel {
  --boost-action-background: var(--color-negative);
}

/* Action menu reaction grid */
.quick-boosts {
  display: grid;
  gap: 0.1em;
  grid-template-columns: repeat(auto-fit, minmax(var(--quick-boost-cell-min, calc(1.85em * var(--actions-menu-scale, var(--user-font-scale, 1)))), 1fr));
  inline-size: 100%;
  justify-items: center;
  max-inline-size: 100%;
}

.boost-character {
  font-size: calc(1.3rem * var(--user-font-scale, 1));
}

@media (hover: none) and (pointer: coarse) {
  .quick-boosts {
    --quick-boost-cell-min: calc(2.75rem * var(--actions-menu-scale, var(--user-font-scale, 1)));

    gap: 0.2em;
  }

  .quick-boosts .message__action-btn {
    --btn-size: calc(2.75rem * var(--actions-menu-scale, var(--user-font-scale, 1)));
  }

  .boost-character {
    font-size: calc(1.55rem * var(--user-font-scale, 1));
  }
}