/*
 * code-forensics
 * Copyright (C) 2016-2021 Silvio Montanari
 * Distributed under the GNU General Public License v3.0
 * see http://www.gnu.org/licenses/gpl.html
 */

@tooltip-border: 1px solid #000000;

.element-property-tooltip-mixin(
  @value-color: #4682B4;
  @value-text-align: right;
  @label-padding: 2px;
  @label-font-weight: normal;
  @grid-template-columns: 1fr 1fr;
) {
  .element-property {
    font-size: 1.2em;
    color: #000000;
    display: grid;
    grid-template-columns: @grid-template-columns;

    .property-label {
      font-weight: @label-font-weight;
      padding-right: @label-padding;
    }
    .property-value {
      text-align: @value-text-align;
      color: @value-color;
    }
  }
}

.element-info-tooltip-mixin(
  @title-color: #FFFFFF;
  @title-bg-color: #4682B4;
  @element-value-color: #4682B4;
  @font-size: 1.2em;
  @font-weight: normal
) {

  display: grid;

  .element-name {
    font-size: @font-size;
    font-weight: @font-weight;
    padding: 5px;
    color: @title-color;
    text-align: center;
    background-color: @title-bg-color;
    display: table-caption;
    white-space: nowrap;
    border-radius: 5px 5px 0 0;
    border-top: @tooltip-border;
    border-right: @tooltip-border;
    border-left: @tooltip-border;
  }

  .property-list {
    background-color: #FFFFFF;
    padding: 5px;
    border-radius: 0 0 5px 5px;
    border-bottom: @tooltip-border;
    border-right: @tooltip-border;
    border-left: @tooltip-border;
    display: grid;
    row-gap: 5px;

    .element-property-tooltip-mixin(@element-value-color);
  }
}

.control-values-mixin() {
  max-height: 200px;
  max-width: 190px;
  overflow: auto;
  white-space: nowrap;
  padding: 5px;
}

.chart-legend-mixin() {
  .legend {
    text {
      font-size: 0.9em;
      text-shadow: 0 1px 0 #FFFFFF, 1px 0 0 #FFFFFF, -1px 0 0 #FFFFFF, 0 -1px 0 #FFFFFF;
      text-anchor: end;
    }
  }
}

.chart-axis-mixin() {
  .axis {
    path {
      shape-rendering: crispEdges;
    }

    .tick {
      text {
        font-size: 1em;
        fill: #0044FF;
      }
    }

    .label {
      fill: #0044FF;
      font-size: 1.8em;
      text-anchor: end;
    }
  }
}