@import '../../../style/mixins/index';

@chart-prefix-cls: ~'@{vts-prefix}-chart';

.@{chart-prefix-cls} {
  &-donut {
    .apexcharts {
      &-datalabels-group {
        transform: translateY(-8px);
      }

      &-datalabel-label {
        fill: @chart-color-donut-title !important;
        font-family: inherit;
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
      }

      &-datalabel-value {
        fill: @chart-color-donut-title !important;
        font-family: inherit;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
      }

      &-datalabels.legend-mouseover-inactive {
        opacity: 1;
      }
    }
  }

  &-line {
    .apexcharts {
      &-xaxis {
        transform: translateX(-5px);
      }

      &-tooltip {
        border: none !important;
        border-radius: 3px;

        &-box {
          padding: 0 10px;
          font-size: 12px;
          line-height: 23px;
          color: @white-1;
          background: @ilus-blue-gray-1;
        }
      }
    }
  }

  &-vertical-grouped {
    .apexcharts {
      &-yaxis, &-xaxis {
        > line {
          // axis line
          display: none;
        }
      }
    }
  }

  .apexcharts-title-text {
    font-size: 17px;
    font-weight: 700;
  }
}