@import '../settings/variables';
@import '../tools/mixins/transition';

.c-chart {
  margin-bottom: $margin-normal;

  &__responsive-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    @media print {
      overflow: hidden;
    }
  }

  &__no-data-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &--tce {
    height: 17em;
  }

  &--forecast {
    height: 19em;
  }

  &--dashboard {
    height: 287px;

    @include media-breakpoint-up(lg) {
      width: 384px;
      min-width: 384px;
    }
  }

  &__arrow {
    width: 2em;
    height: 2em;
    background-color: $color-background-alternative;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $color-secondary-dark;

    &:hover {
      color: $color-secondary-dark;
    }

    &--disabled {
      color: $color-mid-grey;

      &:hover {
        color: $color-mid-grey;
        cursor: not-allowed;
      }
    }

    @media print {
      display: none;
    }
  }

  &__bar {
    @include transition((fill));
    cursor: pointer;

    &--fill-primary {
      fill: $color-primary;
    }

    &--selected {
      fill: $color-selected;
    }

    &--bordered {
      fill: $color-primary-light;
      stroke: $color-primary;
    }

    &--unselectable {
      cursor: default;
    }
  }

  &__label {
    fill: $color-dark-grey;
    font-size: 0.625em;
    letter-spacing: 0.7px;
    text-transform: uppercase;

    &--selected {
      fill: $color-secondary-dark;
    }
  }

  &__unit-label {
    fill: $color-dark-grey;
    font-size: 0.625em;
    letter-spacing: 0.7px;
    text-transform: uppercase;
  }

  &__value-label {
    fill: $color-dark-grey;
    font-size: $font-size-medium;
  }

  &__sub-label {
    fill: $color-primary;
    font-size: 0.625em;
    text-transform: uppercase;
    letter-spacing: 0.7px;

    &--selected {
      font-weight: $font-weight-bold;
    }
  }

  &__fill-label {
    fill: $color-primary;
    font-family: $base-font-family;
    font-size: $font-size-medium;
    font-weight: $font-weight-normal;

    &--selected {
      fill: $color-selected;
    }
  }

  &__grid-line {
    stroke: $color-mid-grey;
    stroke-width: $hairline;
    stroke-dasharray: 0.125em, 0.25em;
  }

  &__line {
    fill: none;
    stroke-width: 3;
    stroke: $color-primary-dark;
  }

  &__dot {
    r: 0.25em;
    fill: $color-primary-dark;
    cursor: pointer;
    &:hover {
      r: 0.35em;
    }
    &--clip-mask {
      r: 0.35em;
      fill: $color-black;
    }
  }
}