@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  .chart-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.125rem;
    align-items: center;
  }

  .dropdown {
    min-width: 8.125rem;
  }

  @include media-breakpoint-down(is) {
    .chart-header {
      flex-direction: column-reverse;
    }

    ngx-legend-chart {
      align-self: flex-start;

      /deep/ .legends {
        padding-left: 0;
        font-size: nb-theme(font-size-sm);
      }

      /deep/ .legend {
        margin-left: 1rem;
      }
    }

    .dropdown {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      align-self: flex-end;
    }
  }
}