@import '../../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/typography/typography';

@include nb-install-component() {
  display: flex;
  flex-direction: column;
  flex: 1;

  nb-card-header {
    flex-direction: row;
    padding-top: nb-theme(card-header-with-select-padding-top);
    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
  }

  nb-card-body {
    padding: 1rem 0 0;
    flex-direction: column;
    flex: 1;
  }

  .chart-info {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 nb-theme(card-padding);
  }

  .delta {
    &.up .direction {
      color: nb-theme(color-success-default);
    }
    &.down .direction {
      color: nb-theme(color-danger-default);
    }
  }

  .delta {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    @include nb-rtl(left, 0);
    @include nb-rtl(right, auto);
  }

  ngx-earning-live-update-chart {
    flex: 1;
    position: relative;

    ::ng-deep {
      canvas {
        border-bottom-left-radius: nb-theme(card-border-radius);
        border-bottom-right-radius: nb-theme(card-border-radius);
      }
      .echart {
        position: absolute;
        height: 100%;
        width: 100%;
      }
    }
  }
}