/*
 * This file is part of Invenio.
 * Copyright (C) 2017 CERN.
 *
 * Invenio is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License as
 * published by the Free Software Foundation; either version 2 of the
 * License, or (at your option) any later version.
 *
 * Invenio is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Invenio; if not, write to the Free Software Foundation, Inc.,
 * 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
 *
 * In applying this license, CERN does not
 * waive the privileges and immunities granted to it by virtue of its status
 * as an Intergovernmental Organization or submit itself to any jurisdiction.
 */

$linecolor: #4682b4;
$axiscolor: #808080;
$gridcolor: #d3d3d3;
$tooltip: rgba(51, 51, 51, .8);;
$shadow: rgba(0, 0, 0, .2);
$white: #fff;

.igj-dot {
  clip-path: url('#clip');
  stroke: $white;
  stroke-width: 2px;
}

.ew-resize {
  cursor: ew-resize;
}

.igj-focus {
  circle {
    fill: none;
    stroke-opacity: .85;
    stroke-width: 7px;
  }
  transition: transform 150ms;
}

svg {
  margin: 12px;
  pointer-events: all;
}

.igj-line {
  clip-path: url('#clip');
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.igj-area {
  clip-path: url('#clip');
  fill-opacity: .1;
}

.igj-axisX, .igj-axisY {

  line {
    fill: none;
    stroke: $axiscolor;
    stroke-width: 1px;
  }

  text {
    opacity: .6;
  }
}

.igj-gridX, .igj-gridY {
  path {
    stroke-width: 0;
  }

  line {
    stroke: $gridcolor;
  }

  .tick {
    opacity: .7;
    stroke: $gridcolor;
  }
}

.igj-title {
  font-size: 17px;
  font-weight: 500;
  text-decoration: underline;
}

.igj-labelX, .igj-labelY {
  font-size: 14px;
  font-weight: normal;
}

.igj-tip {
  background-color: $tooltip;
  border-radius: 5px;
  box-shadow: -10px 10px 20px 0 $shadow;
  box-sizing: border-box;
  color: $white;
  font-size: 14px;
  font-weight: normal;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  transition: opacity 150ms linear;
  z-index: 2;

  &.bottom:after {
    border-color: $tooltip transparent transparent;
    border-style: solid;
    border-width: 5px;
    content: '';
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: 100%;
  }

  &.top:after {
    border-color: transparent transparent $tooltip;
    border-style: solid;
    border-width: 5px;
    bottom: 100%;
    content: '';
    left: 50%;
    margin-left: -5px;
    position: absolute;
  }

  &.left:after {
    border-color: transparent $tooltip transparent transparent;
    border-style: solid;
    border-width: 5px;
    content: '';
    margin-top: -5px;
    position: absolute;
    right: 100%;
    top: 50%;
  }

  &.right:after {
    border-color: transparent transparent transparent $tooltip;
    border-style: solid;
    border-width: 5px;
    content: '';
    left: 100%;
    margin-top: -5px;
    position: absolute;
    top: 50%;
  }
}

.igj-legend {
  text.label {
    font-size: 12px;
    font-weight: normal;
  }
}