@import "src/app/styles/colors";
@import "src/app/styles/variables";
@import "src/app/styles/font";

.project-stat {
  display: flex;
  justify-content: space-around;
  width: calc(100% - 16px);
  margin: 16px 8px;

  &__item {
    height: 208px;
    margin: 16px;
    width: 100%;
    box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;

    @media (min-width: $small) and (max-width: $large) {
      width: 41.4%;
    }

    @media (min-width: $large) and (max-width: $normal) {
      width: 43.6%;
    }
  }

  &__title {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__title-text {
    font-weight: $fw-lighter;
    font-size: $fs-medium;
    color: $dark-grey;
    margin: 0;
  }

  @media (min-width: $small) and (max-width: $normal) {
    justify-content: start;
  }

  @media (max-width: $normal) {
    flex-wrap: wrap;
  }
}

.project-stat-content {
  padding: 8px;

  &__total-info-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
  }

  &__total-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  &__total-info-users {
    color: $grey;
    font-weight: $fw-lighter;
    font-size: $fs-xxxl;
    margin: 0;
    height: 45px;
    letter-spacing: 0.15px;
  }

  &__total-info-percent {
    color: $green;
    font-weight: $fw-lighter;
    font-size: $fs-small;
    margin: 0 0 0 5px;
  }

  &__total-info-percent-warn {
    color: $pink;
    font-weight: $fw-lighter;
    font-size: $fs-small;
    margin: 0 0 0 5px;
  }

  &__total-info-chart {
    position: relative;
    right: -9px;
    top: -2px;
  }

  &__stat-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
  }

  &__stat-value-wrapper {
    display: flex;
    align-items: center;
  }

  &__stat-value {
    font-weight: $fw-lighter;
    font-size: $fs-regular;
    color: $dark-grey;
    margin: 0;
  }

  &__stat-icon {
    transform: rotate(45deg);
    color: $green;
  }

  &__stat-icon-warn {
    transform: rotate(135deg);
    color: $pink;
  }

  &__stat-item-title {
    color: $grey;
    font-weight: $fw-lighter;
    font-size: $fs-xs;
    margin: 0;
  }
}
