@prefixes: buttlet-screen;

.text-style(@fontSize, @color) {
  font-size: @fontSize;
  color: @color;
}

.@{prefixes}-wrapper {
  position: relative;

  .@{prefixes}-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    z-index: 999;
    padding: 3px 8px;
    margin-top: 30px;
    white-space: nowrap;
    font-size: 12px;

    .@{prefixes}-label-text {
      .text-style(12px, #fff);
    }

    .@{prefixes}-label-upvote-count {
      display: none;
    }

    .@{prefixes}-label-is-upvote-move-1 {
      position: absolute;
      right: 0;
      opacity: 0;
      .text-style(20px, #fff)
    }

    .@{prefixes}-label-is-upvote-move-2 {
      position: absolute;
      animation: move2 0.5s backwards;
      right: 0;
      opacity: 0;
      .text-style(20px, #fff);
    }

    .@{prefixes}-label-is-upvote-move-3 {
      position: absolute;
      animation: move3 0.5s backwards;
      right: 0;
      opacity: 0;
      .text-style(20px, #fff);
    }

    .@{prefixes}-label-is-upvote-move-4 {
      position: absolute;
      animation: move4 0.5s backwards;
      right: 0;
      opacity: 0;
      .text-style(20px, #fff);
    }
  }

  .@{prefixes}-label-disappear {
    animation: disappearMove 0.5s 0.25s forwards;
  }
}

.keyframes(@name) {
  @keyframes @name {
    0% {
      opacity: 1;
      top: 0;
    }

    5% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      top: -20px;
    }
  }
}

.keyframes(move2);
.keyframes(move3);
.keyframes(move4);

@keyframes disappearMove {
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}