tweb/src/scss/partials/_reaction.scss

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

/* @keyframes reaction-activate {
  0% {
    opacity: 1;
    transform: scale(1.75);
  }

  95% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(1.25);
  }
} */

.reaction {
  display: flex;
  align-items: center;

  &-sticker {
    --custom-emoji-size: var(--reaction-size);
    position: relative;
    width: var(--reaction-size);
    height: var(--reaction-size);
    display: flex;
    align-items: center;
    justify-content: center;
    
    &-activate {
      position: absolute;
      top: var(--reaction-offset);
      right: var(--reaction-offset);
      bottom: var(--reaction-offset);
      left: var(--reaction-offset);
      z-index: 1;
      // animation: reaction-activate 2s linear forwards;
    }

    &.has-animation {
      > .media-sticker {
        opacity: 0;
      }
    }

    &:not(.is-static):not(.is-custom) {
      .media-sticker {
        --size: calc(var(--reaction-size) + var(--reaction-offset) * -2);
        width: var(--size) !important;
        height: var(--size) !important;
        max-width: var(--size);
        max-height: var(--size);
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
      }
    }

    &.is-custom {
      border-radius: .3125rem;

      .custom-emoji,
      .media-sticker {
        border-radius: inherit;
      }

      .custom-emoji-canvas {
        z-index: auto;
      }
    }
  }

  &-inline {
    --reaction-size: .875rem;
    --reaction-offset: -.4375rem;
    min-width: var(--reaction-size);
    min-height: var(--reaction-size);
  }

  &-inline &-counter {
    font-size: inherit !important;
    order: -1;
    margin-right: .0625rem !important;
  }

  &-block {
    --additional-height: .5rem;
    // --padding-horizontal: .5rem;
    --margin: .375rem;
    // --reaction-size: 1.0625rem;
    --reaction-size: 1.375rem;
    --reaction-offset: -.5625rem;
    --background-color: var(--message-highlightning-color);
    --chosen-background-color: var(--message-primary-color);
    --counter-color: #fff;
    --reaction-total-size: calc(var(--reaction-size) + var(--additional-height));
    height: var(--reaction-total-size);
    border-radius: var(--reaction-total-size);
    // padding: 0 .375rem 0 .625rem;
    // padding: 0 var(--padding-horizontal) 0 calc(var(--padding-horizontal) + var(--reaction-size));
    // padding: 0 var(--padding-horizontal);
    padding: 0 .5rem;
    background-color: var(--background-color);
    cursor: pointer;
    position: relative;
    margin-top: var(--margin);
    margin-right: var(--margin);
    color: var(--counter-color);

    @include hover() {
      &:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: " ";
        background-color: var(--chosen-background-color);
        border-radius: inherit;
        opacity: $hover-alpha;
      }
    }

    .reaction-sticker,
    .reaction-counter {
      z-index: 1;
    }

    &:last-child {
      margin-right: 0;
    }

    &:before {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: var(--chosen-background-color);
      // visibility: hidden;
      border-radius: inherit;
      // transform: scale3d(.2, .2, .2);
      transform: scale3d(0, 0, 0);
      opacity: 0;
    }

    &.is-chosen {
      &:not(.backwards) {
        &:before {
          transform: scale3d(1, 1, 1);
          opacity: 1;
          // visibility: visible;
        }

        .stacked-avatars {
          --border-color: var(--chosen-background-color);
        }
      }

      &.animating {
        &:before {
          transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
          // transition: transform var(--transition-standard-in);
        }

        .reaction-counter {
          transition: color var(--transition-standard-in);
          // transition: color 1s linear;
        }

        .stacked-avatars-avatar-container {
          transition: border-color var(--transition-standard-in);
        }
      }
    }

    .stacked-avatars {
      --border-color: transparent;
      --border-size: .125rem;
      --margin-right: -.875rem;
      margin-left: .1875rem;
      // margin-right: .0625rem;
    }
  }

  &-block &-counter {
    font-size: .9375rem !important;
    font-weight: var(--font-weight-bold);
    margin: 0 .0625rem 0 .375rem;
    line-height: 1.125rem;
    position: relative;
  }
}