.boosts {
  .btn {
    font-size: 0.55rem;
  }

  .btn.boost__action {
    font-size: 0.6em;
    margin-block-start: var(--block-space--half);
  }
}

.boost {
  transition: opacity 0.1s ease-in-out;
  border-radius: 4rem;
  padding: 0.1em 0.2em;
  opacity: 1;
  margin-top: var(--block-space--half);

  .boost__delete {
    display: none;

    .boost--expanded & {
      display: flex;
    }
  }

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

.boost__avatar {
  --avatar-size: 2.5ch;

  inline-size: 2.5ch;
  block-size: 2.5ch;
}

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

.boost-form {
  transition: none;
  padding-block: 0.075em;

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

  .boost-form__label:focus {
    outline: none;
  }

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

    max-width: 16ch;
    display: inherit;
    min-width: 2em;
  }
}

@keyframes boost {
  0%   { transform: scale(0.3);  opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes scale-fade-out {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}