@import "../../styles/variables";
@import "../../../node_modules/material-design-lite/src/_variables";

@mixin tooltipRules(
  $tooltip,
  $tooltip-title,
  $tooltip-item) {
  $p_body_bg_color: map-get($tooltip, "tooltipBodyBgColor");
  $p_body_fg_color: map-get($tooltip, "tooltipContentColor");
  $p_body_opacity: map-get($tooltip, "tooltipBodyTransparency");

  $p_title_font_size: map-get($tooltip-title, "fontSize");
  $p_title_separator_width: map-get($tooltip-title, "separatorWidth");
  $p_title_separator_style: map-get($tooltip-title, "separatorStyle");
  $p_title_separator_color: map-get($tooltip-title, "separatorColor");
  
  $p_item_spearator_width: map-get($tooltip-item, "separatorWidth");
  $p_item_spearator_style: map-get($tooltip-item, "separatorStyle");
  $p_item_spearator_color: map-get($tooltip-item, "separatorColor");
  
  position: absolute;
  pointer-events: none;
  z-index: $alwaysTop;
  opacity: 0;
  height: 0;
  visibility: hidden;
  transition: visibility, opacity;
  transition-duration: 300ms;
  transition-timing-function: $animation-curve-linear-out-slow-in;

  &.active {
    height: auto;
    visibility: visible;
    opacity: 1;
  }

  .tooltip-content {
    min-width: 200px;
    padding: 12px 14px;
    border-radius: 6px;
    /* background-color: $p_body_bg_color; */
    background-color: rgba(0,0,0,.75);
    color: $p_body_fg_color;
    opacity: $p_body_opacity;

    .cc-title {
      font-weight: bold;
      font-size: $p_title_font_size;
      opacity: 1;
      /*
      border-bottom-width: $p_title_separator_width;
      border-bottom-style: $p_title_separator_style;
      border-bottom-color: $p_title_separator_color; */
      /* border-bottom: 1px solid rgba(255,255,255,.12);
      padding-bottom: 8px;
      margin-bottom: 15px; */
      text-align: left;
      margin: 0;
      
      &+.tooltip-items {
        border-top: 1px solid rgba(255,255,255,.18);
        padding-top: 6px;
        margin-top: 6px;
      }
    }

  }

  .tooltip-item {
    /*
    border-bottom-width: $p_item_spearator_width;
    border-bottom-style: $p_item_spearator_style;
    border-bottom-color: $p_item_spearator_color; */
    padding: 3px 0;
    
    &:first-child {
        padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
    }

    .tooltip-item-color {
      width: 20px;
      height: 12px;
      display: inline-block;
      border-radius: 12px;
      background-color: rgba(255,255,255,.12);
      margin-right: 3px;
      position: relative;
      top: 2px;
    }

    .tooltip-item-label {
      margin-right: 15px;
    }

    .tooltip-item-value {
      font-weight: 700;
      float: right;
    }
  }
  
  
  &.tooltip-light {
      
    .tooltip-content {
      background-color: rgba(255,255,255,.95);
      border: 1px solid rgba(0,0,0,.2);
      color: #111;
      
      .cc-title {
        color: #111;
      }
    }
  }
  
  
}