@use "variables.scss";

.annotation-details {
  .label-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    .annotation-details-icon {
      display: flex;

      &.animated-ripple {
        animation: bounce 0.4s 0.1s;
        transform: scale(1);
      }

      svg {
        width: 25px;
      }

      &.user-icon {
        padding: 0 3px;
        svg {
          width: 20px;
        }
      }
    }
    &.is-small {
      .annotation-details-icon {
        svg {
          width: 16px;
        }
        &.user-icon {
          svg {
            width: 12px;
          }
        }
      }
    }
  }

  .label-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 100px;

    .label-description {
      opacity: 0.7;
      color: variables.$white;
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      border-bottom: 1px solid variables.$low-opacity-white;
      padding-bottom: 8px;
      word-wrap: break-all;
      white-space: normal;
      width: 216px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .confidence {
      color: variables.$white;
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      &:not(.tooltip-in-public-view) {
        border-bottom: 1px solid variables.$low-opacity-white;
        padding-bottom: 8px;
      }

      .value {
        color: variables.$green;

        &.yellow {
          color: variables.$yellow;
        }

        &.red {
          color: variables.$red;
        }
      }
    }

    .revision {
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      color: variables.$white;

      > div {
        display: flex;
        align-items: center;
      }

      .annotation-details-icon {
        display: flex;

        svg {
          width: 25px;
        }

        &.user-icon {
          padding-right: 5px;

          svg {
            width: 20px;
          }
        }
      }
    }
  }
}

@keyframes bounce {
  0% {
    transform: scale(0.7);
    opacity: 1;
  }

  20% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  40% {
    transform: scale(1);
    opacity: 0.7;
  }

  60% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}