ngx-admin/src/app/pages/dashboard/status-card/status-card.component.scss

@import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';

@include nga-install-component() {
  nga-card {
    flex-direction: row;
    align-items: center;
    height: 6rem;
    overflow: visible;

    $bevel: btn-hero-bevel(nga-theme(card-bg));
    $shadow: btn-hero-shadow();
    box-shadow: $bevel, $shadow;
    transition: all 0.1s ease-out;

    $border-radius: nga-theme(card-border-radius);
    .icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 7rem;
      font-size: 4em;
      border-radius: $border-radius 0 0 $border-radius;
      transition: all 0.1s ease-out, color 0s;
      color: nga-theme(color-white);

      &.primary {
        @include btn-hero-primary-gradient();
        @include btn-hero-primary-bevel-glow-shadow();
      }
      &.success {
        @include btn-hero-success-gradient();
        @include btn-hero-success-bevel-glow-shadow();
      }
      &.info {
        @include btn-hero-info-gradient();
        @include btn-hero-info-bevel-glow-shadow();
      }
      &.warning {
        @include btn-hero-warning-gradient();
        @include btn-hero-warning-bevel-glow-shadow();
      }
    }

    &:hover {
      background: lighten(nga-theme(card-bg), 5%);

      .icon-container {
        &.primary {
          background-image: btn-hero-primary-light-gradient();
        }
        &.success {
          background-image: btn-hero-success-light-gradient();
        }
        &.info {
          background-image: btn-hero-info-light-gradient();
        }
        &.warning {
          background-image: btn-hero-warning-light-gradient();
        }
      }
    }

    &:active {
      box-shadow: none;
      background: nga-theme(card-bg);

      .icon-container {
        &.primary, &.success, &.info, &.warning {
          box-shadow: none;
        }
        &.primary {
          background-image: btn-hero-primary-dark-gradient();
        }
        &.success {
          background-image: btn-hero-success-dark-gradient();
        }
        &.info {
          background-image: btn-hero-info-dark-gradient();
        }
        &.warning {
          background-image: btn-hero-warning-dark-gradient();
        }
      }
    }

    &.off {
      color: nga-theme(card-fg);

      .icon-container {
        color: nga-theme(card-fg);

        &.primary, &.success, &.info, &.warning {
          box-shadow: none;
          background-image: linear-gradient(to right, transparent, transparent);
        }
      }

      .details {
        border-left: 1px solid nga-theme(separator);
      }
      .title {
        color: nga-theme(card-fg);
      }
    }

    .details {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      padding-left: 1.5rem;
      border-left: 1px solid transparent;
    }

    .title {
      font-family: nga-theme(font-secondary);
      font-size: 1.5rem;
      font-weight: nga-theme(font-weight-bolder);
      color: nga-theme(card-fg-heading);
    }

    .status {
      font-size: 1.125rem;
      font-weight: nga-theme(font-weight-light);
      text-transform: uppercase;
      color: nga-theme(card-fg);
    }
  }
}