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

@import '../../../@theme/styles/themes';

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

    .icon-container {
      height: 100%;
      padding: 0.625rem;
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5.75rem;
      height: 4.75rem;
      font-size: 3.75rem;
      border-radius: nb-theme(card-border-radius);
      transition: width 0.4s ease;
      transform: translate3d(0, 0, 0);
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      color: nb-theme(text-control-color);

      @each $status in nb-get-statuses() {
        &.status-#{$status} {
          $left-color: nb-theme(button-hero-#{$status}-left-background-color);
          $right-color: nb-theme(button-hero-#{$status}-right-background-color);
          background-image: linear-gradient(to right, $left-color, $right-color);

          &:hover {
            $left-hover-color: nb-theme(button-hero-#{$status}-hover-left-background-color);
            $right-hover-color: nb-theme(button-hero-#{$status}-hover-right-background-color);
            background-image: linear-gradient(to right, $left-hover-color, $right-hover-color);
          }
        }
      }
    }

    &.off {
      color: nb-theme(text-hint-color);

      .status,
      .title,
      .icon {
        color: nb-theme(text-hint-color);
      }

      @each $status in nb-get-statuses() {
        .icon.status-#{$status} {
          box-shadow: none;
          background-image: linear-gradient(to right, transparent, transparent);
        }
      }
    }

    .details {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      @include nb-ltr(padding, 0 0.5rem 0 0.75rem);
      @include nb-rtl(padding, 0 0.75rem 0 0.5rem);
      border-left: 1px solid transparent;
    }

    .title {
      margin: 0;
    }

    .status {
      text-transform: uppercase;
    }
  }
}