@import "../Tokens/tokens.scss";

.statistics-card {
  padding: ($baseUnit * 2) ($baseUnit * 4) ($baseUnit * 2) ($baseUnit * 4);
  flex: 1;

  @media(max-width: 1000px) {
    margin-left: 0;
    width: 100%;
    padding-left: $baseUnit * 2;
  }

  &:not(.card-link) {
    background: $catSkillWhite;
  }

  &.card-link {
    position: relative;
    outline: 0 !important;

    .card-link-text {
      text-decoration: none !important;
    }
  }

  & .card-link-icon {
    position: absolute;
    right: 20px;
    min-width: 40px;
  }
}

.statistics-card-header {
  height: 65px;
}

.statistics-card-text {
  margin-top: auto;
}

.statistics-card-group {
  display: flex;
  gap: 1rem;

  @media(max-width: 1000px) {
    flex-wrap: wrap;
    margin-left: 0;
    margin-bottom: $baseUnit * 3;
  }
}

.statistics-progressbar {
  width: 400px;

  @media(max-width: 1000px) {
    width: 100px;
  }
}

.statistics-progressbar-container {
  background: $onahau;
  height: $baseUnit * 2;
  width: 100%;
  animation: animate-progressbar-container 1.5s ease-out;
}

.statistics-progressbar-group {
  table {
    border-collapse: collapse;
    width: 100%;

    tr {
      td {
        padding-right: $baseUnit * 2;
        padding-bottom: $baseUnit * 1;
      }
    }
  }
}

@keyframes animate-progressbar-container {
  0% {
    width: 0%;
    opacity: 0%;
  }
  25% {
    opacity: 100%;
  }
  100% {
    width: 100%
  }
}