/*******************************************************************************
* Copyright (c) 2019 IBM Corporation and others.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v2.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v20.html
*
* Contributors:
*     IBM Corporation - initial API and implementation
******************************************************************************/

@import "~@carbon/colors/scss/colors";
@import "~@carbon/layout/scss/spacing";
@import "~@carbon/type/scss/type";
@import "~@carbon/grid/scss/grid";

.Chart_C3 {
  background-color: black;
  height: 380px;
  overflow: hidden;
}

.Chart_actionbar {
  line-height: 40px;
  width: 100%;
  height: 35px;
  display: flex;
}

.Chart_actionbar .testPathLabel {
  order: 1;
  margin-right: 5px;
}

.Chart_actionbar .testPathURL {
  order: 2;
  flex-grow: 1;
}

.Chart_actionbar .testPathURL .scrollableText {
  background: none;
  color: white;
  border: none;
  font-size: 1.1em;
  width: 100%;
}

.Chart_actionbar .bx--dropdown__wrapper--inline,
.Chart_actionbar .bx--dropdown--inline {
  width: 100% !important;
}

.Chart_actionbar .bx--list-box__menu {
  max-height: 30rem;
}

// baseline
.c3 path {
  stroke: $carbon--gray-70;
  stroke-width: 2px;
}

// zoom bar
.c3-brush > .extent {
  fill-opacity: 0.5;
  fill: $carbon--gray-60;
  stroke-width: 1px;
  stroke: $carbon--gray-50;
}

// zoom bar selector
.c3-brush > rect.selection {
  stroke: $carbon--gray-50;
  height: 62px;
  y: -1;
  stroke-width: 2px;
}

// zoom bar drag handles
.c3-brush > rect.handle.handle--e,
.c3-brush > rect.handle.handle--w {
  fill: $carbon--gray-20;
  width: 6px;
  height: 25px;
  y: 18;
  visibility: visible !important;
}

// Selected point on line
.c3-selected-circle {
  fill: $carbon--gray-90;
}

// Chart legend labels
.c3 .c3-legend-item text {
  fill: $carbon--gray-40;
}

.c3 svg {
  @include properties($label-01);
  font-family: carbon--font-family("sans");
  font-size: carbon--type-scale(2);
}

.c3-axis.c3-axis-y text,
.c3-axis.c3-axis-x text {
  fill: $carbon--gray-10;
  font-size: 0.9rem;
}

.c3-grid line {
  stroke: $carbon--gray-80;
}

/* Move the zoom chart down a few pixels  */
#c3ChartComponent > svg > g:nth-child(3) {
  transform: translate(50px, 301px);
  overflow: hidden;
}

/* Add a spacer between the main chart and zoom chart */
.spacer-container {
  height: 20px;
  margin-top: -80px;
  background-color: $carbon--gray-90;
}

.nodata {
  z-index: 10;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: fadeInWithDelay 2s ease-in;
  animation: fadeInWithDelay 2s;
  margin-bottom: 100px;
}

@keyframes fadeInWithDelay {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInWithDelay {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.nodata .nodata_message {
  color: $carbon--gray-30;
  width: auto;
  margin-top: -75px;
  font-family: carbon--font-family("sans");
  text-align: center;
}

.nodata .nodata_message_title {
  color: $carbon--gray-10;
  font-size: carbon--type-scale(5);
}

.nodata .nodata_message_path {
  color: $carbon--gray-10;
  font-size: carbon--type-scale(3);
  font-weight: carbon--type-weight("Semibold");
  font-family: carbon--font-family("mono");
  padding: 30px 0 10px 0;
}

.nodata .nodata_message_help {
  color: $carbon--gray-50;
  padding: 20px 20px 7px 20px;
  font-size: carbon--type-scale(3);
}

.nodata_message_label {
  color: $carbon--gray-50;
  font-family: carbon--font-family("sans");
}

.chartTooltip {
  background: $carbon--gray-80;
  padding: $carbon--spacing-05;
  line-height: 1.2rem;
}
