@import "variables";
@import "mixins/link";
@import "../../../layout/layout";

:host{
  display: block;
  height: $graph-height;
  background-color: $blue-900;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 7px;
    width: calc(50% + 33px);
    left: calc(50% - 90px);
    z-index: 1;

    .btn {
      height: 32px;
      max-width: 230px;
    }
  }

  .line-chart-container {
    height: 100%;
    padding-bottom: 24px;
  }

  .overview-placeholder {
    .no-data-title {
      margin: 24px 0;
    }

    .al-ico-no-scatter-graph {
      color: $blue-300;
    }

    .no-data-button {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  @include link($neon-yellow);
}

.close-button {
  position: relative;
  top: 12px;
  left: 624px;
  width: 30px;
  cursor: pointer;
}

.metric-menu {
  width: 660px;
  height: 700px;
  padding: 32px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;

  i {
    color: $blue-400;
  }

  .title {
    font-size: 20px;
    color: $blue-800;
    font-weight: 500;
    margin: 24px 0;
  }

  sm-select-metric-for-custom-col {
    height: 400px;
    max-height: calc(90vh - 300px);
  }
}
