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

.reactions {
  &-like-block {
    --margin-vertical: .375rem;
    --margin-horizontal: .375rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--margin-vertical) / -2);
    position: relative;

    &.has-no-reactions {
      display: unset;
    }
  }

  &-block {
    margin-top: -.125rem;
    position: relative;
  }

  &-renderer-canvas {
    z-index: 1 !important;
  }

  &-tag {
    &.is-locked {
      .reaction-tag {
        opacity: .6;
      }
    }
  }

  // &-inline {
  //   display: inline-flex;

  //   &:not(:empty) {
  //     margin-right: .125rem;
  //   }
  // }

  .tooltip {
    --notch-offset: calc(38px + (var(--width) - 53.5px) / 2);
    height: 3.25rem;
    display: flex;
    align-items: center;
    inset-inline-start: -1.3125rem;
    position: absolute;
    top: -4.25rem;
    white-space: nowrap;
    cursor: default;
  }
}

// todo: we should probably refactor this into a "tooltip at the top of the chat" component and also use it instead of setQuizHint
.paid-reaction-tooltip {
  top: 0.25rem;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: max-content;
  max-width: calc(100% - 1rem);

  .tooltip-notch { display: none; }

  &.tooltip {
    transform: translate(-50%, 0);
    &.is-visible:not(.backwards) {
      transform: translate(-50%, 0);
    }
    &.mounted {
      transform: translate(-50%, -1rem);
    }
  }

  &--a-little-wider {
    min-width: 300px;
  }

  .tooltip-icon {
    color: var(--star-golden-color);
  }

  .tooltip-undo {
    display: flex;
    color: #8EDEFF;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    margin-inline-start: 2.5rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    white-space: nowrap;

    &-timer {
      width: 1.5rem;
      height: 1.5rem;
      position: relative;
      overflow: hidden;

      &-svg {
        transform: scaleX(-1);
      }

      &-circle {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
      }

      &-number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: var(--font-size-14);
        margin-top: .5px;
        margin-inline-start: -.25px;
      }
    }
  }
}
