@import "../../../../../public/css/variables";
@import "../../../../../public/css/functions";
@import "../../../../../public/css/mixins";

:host {
  display: block;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.knk-grade {
  position: relative;
  max-width: 100%;

  &__inside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &__outside {
    transform: rotate(270deg);
  }
}

ng-svg-icon.knk-grade-image {
  &::ng-deep svg {
    max-width: 35px;
    max-height: 32px;
    width: auto;
    height: auto;
    fill-rule: evenodd;
    clip-rule: evenodd;
  }
}

ng-svg-icon.knk-grade-image.knk-grade-image--dense {
  &::ng-deep svg {
    max-width: 18px;
    max-height: 22px;
  }
}

.knk-grade-score {
  @include knk-font-default;
  font-size: 22px;
  line-height: 1.2;
  color: $knk-color-primary;

  &#{&}--dense {
    font-size: 28px;
    line-height: 0.9;
  }
}

.knk-grade-icon {
  max-width: 100%;

  &__background {
    fill: none;
    stroke-width: 5px;
    stroke: rgba($knk-color-primary, 0.3);
  }

  &__foreground {
    fill: none;
    stroke-width: 5px;
    stroke-opacity: 0;
    stroke: $knk-color-primary;
  }

  &#{&}--animate &__foreground {
    stroke-opacity: 1;
    transition: stroke-opacity 1s ease-in-out, stroke-dashoffset 1s ease-in-out;
    will-change: stroke-opacity, stroke-dashoffset;
  }

  &#{&}--dense &__background {
    stroke-width: 2.5px;
  }

  &#{&}--dense &__foreground {
    stroke-width: 2.5px;
  }
}

.knk-grade-range {
  overflow: hidden;
  position: relative;
  max-width: 200px;
  width: 100%;
  height: 15px;
  border-radius: 30px;
  background-color: rgba($knk-color-primary, 0.3);

  &__scale {
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    height: 15px;
    border-radius: 30px;
    background-color: $knk-color-primary;
    @include knk-font-default;
    font-size: 10px;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
  }

  &#{&}--animate &__scale {
    opacity: 1;
    transition: opacity 1s ease-in-out, max-width 1s ease-in-out;
    will-change: opacity, max-width;
  }
}
