@import "./imports.scss";

.label-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;

  .annotation-details-icon {
    display: flex;
    padding: 0 15px;

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

    svg {
      width: 25px;
    }

    &.user-icon {
      padding: 0 18px;
      svg {
        width: 20px;
      }
    }
  }
}

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

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

  .accuracy {
    color: $white;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid $low-opacity-white;
    padding-bottom: 8px;

    .value {
      color: $green;

      &.yellow {
        color: $yellow;
      }

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

  .revision {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: $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);
  }
}