/**
 * For the full copyright and license information, please view the
 * docs/licenses/LICENSE.txt file that was distributed with this source code.
 */
.kpi-row {
  position: relative;
  display: flex;
  align-items: stretch;
  text-decoration: none;

  @include media-breakpoint-up(xl) {
    padding: var(--#{$cdk}size-16) var(--#{$cdk}size-60);
    margin: 0 auto;
    text-align: center;

    .box-stats {
      margin: 0 auto;
    }
  }

  @include media-breakpoint-down(lg) {
    overflow-x: auto;

    .box-stats {
      width: max-content;
      min-width: var(--#{$cdk}size-208);
      padding: var(--#{$cdk}size-16);
      margin-right: var(--#{$cdk}size-16);
      text-decoration: none;
      background-color: var(--#{$cdk}white);
      border: $card-border-width solid var(--#{$cdk}primary-400);
    }

    .box-stats:last-child {
      margin-right: var(--#{$cdk}size-72);
    }

    &:hover {
      text-decoration: none;
    }

    .kpi-content {
      padding-left: var(--#{$cdk}size-36);

      .title {
        font-size: var(--#{$cdk}size-14);
      }

      .kpi-description {
        .value {
          font-size: var(--#{$cdk}size-14);
        }
      }
    }
  }
}

.kpi-refresh {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}


.kpi-content {
  position: relative;
  padding-left: var(--#{$cdk}size-40);
  text-align: left;

  > .material-icons {
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--#{$cdk}size-36);
    color: var(--#{$cdk}primary-800);
  }

  &.-color2 {
    .value,
    > .material-icons {
      color: $danger;
    }
  }

  &.-color3 {
    .value,
    > .material-icons {
      color: $success;
    }
  }

  &.-color4 {
    .value,
    > .material-icons {
      color: var(--#{$cdk}purple-700);
    }
  }

  .title,
  .subtitle,
  .value {
    padding-left: var(--#{$cdk}size-2);
    font-size: var(--#{$cdk}size-12);
    color: var(--#{$cdk}primary-800);
  }

  .title {
    display: inline-block;
  }

  .subtitle {
    display: block;
    color: var(--#{$cdk}primary-500);
    text-transform: uppercase;
  }

  .value {
    display: block;
    font-size: var(--#{$cdk}size-20);
    color: var(--#{$cdk}primary-800);
  }
}

// specific design for orders page. If design tends to repeat use this for all kpi's in all pages
.adminorders {
  .kpi-content {
    .kpi-description {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: flex-end;

      .value {
        padding-right: var(--#{$cdk}size-8);
        color: var(--#{$cdk}primary-800);
      }
    }
  }
}

// Remove backgrounds from card below SM breakpoint
.card-kpis {
  @include media-breakpoint-down(lg) {
    background-color: inherit;
    border: none;
    box-shadow: inherit;
  }
}
