@import "../../styles/variables";
@import "../../styles/colors";

@mixin legendPanelRules(
  $legend-panel,
  $legend-panel-edit-btn,
  $legend-panel-attr-item,
  $legend-panel-axis-indicator,
  $legend-panel-color-indicator,
  $legend-panel-selector-trigger,
  $legend-panel-selector-panel,
  $legend-panel-selector-panel-switch) {
  $p_panel_font_size: map-get($legend-panel, "fontSize");
  $p_panel_fg_color: map-get($legend-panel, "fgColor");
  $p_panel_border_width: map-get($legend-panel, "borderWidth");
  $p_panel_border_style: map-get($legend-panel, "borderStyle");
  $p_panel_border_color: map-get($legend-panel, "borderColor");
  $p_panel_border_radius: map-get($legend-panel, "borderRadius");
  $p_panel_active_border_color: map-get($legend-panel, "activeBorderColor");

  $p_edit_btn_separator_width: map-get($legend-panel-edit-btn, "separatorWidth");
  $p_edit_btn_separator_style: map-get($legend-panel-edit-btn, "separatorStyle");
  $p_edit_btn_separator_color: map-get($legend-panel-edit-btn, "separatorColor");
  $p_edit_btn_font_size: map-get($legend-panel-edit-btn, "fontSize");
  $p_edit_btn_fg_color: map-get($legend-panel-edit-btn, "bgColor");
  $p_edit_btn_active_bg_color: map-get($legend-panel-edit-btn, "activeBgColor");

  $p_attr_item_gutter: map-get($legend-panel, "legendAttrItemGutter");
  $p_attr_item_border_width: map-get($legend-panel-attr-item, "borderWidth");
  $p_attr_item_border_style: map-get($legend-panel-attr-item, "borderStyle");
  $p_attr_item_border_color: map-get($legend-panel-attr-item, "borderColor");
  $p_attr_item_active_border_color: map-get($legend-panel-attr-item, "activeBorderColor");
  $p_attr_item_active_border_radius: map-get($legend-panel-attr-item, "activeBorderRadius");

  $p_axis_indicator_fg_color: map-get($legend-panel-axis-indicator, "fgColor");
  $p_axis_indicator_font_size: map-get($legend-panel-axis-indicator, "fontSize");
  $p_axis_indicator_border_width: map-get($legend-panel-axis-indicator, "borderWidth");
  $p_axis_indicator_border_style: map-get($legend-panel-axis-indicator, "borderStyle");
  $p_axis_indicator_border_color: map-get($legend-panel-axis-indicator, "borderColor");

  $p_color_indicator_bg_color: map-get($legend-panel-color-indicator, "bgColor");
  $p_color_indicator_active_bg_color: map-get($legend-panel-color-indicator, "activeBgColor");

  $p_chart_type_icon_size: map-get($legend-panel, "chartTypeIconSize");
  $p_selector_trigger_bg_color: map-get($legend-panel-selector-trigger, "bgColor");
  $p_selector_trigger_fg_color: map-get($legend-panel-selector-trigger, "fgColor");

  $p_selector_panel_bg_color: map-get($legend-panel-selector-panel, "bgColor");
  $p_selector_panel_border_width: map-get($legend-panel-selector-panel, "borderWidth");
  $p_selector_panel_border_style: map-get($legend-panel-selector-panel, "borderStyle");
  $p_selector_panel_border_color: map-get($legend-panel-selector-panel, "borderColor");
  $p_selector_panel_border_radius: map-get($legend-panel-selector-panel, "borderRadius");

  $p_selector_switch_selected_border_width: map-get($legend-panel-selector-panel-switch, "selectedBorderWidth");
  $p_selector_switch_selected_border_style: map-get($legend-panel-selector-panel-switch, "selectedBorderStyle");
  $p_selector_switch_selected_border_color: map-get($legend-panel-selector-panel-switch, "selectedBorderColor");

  z-index: $control;

  * {
    box-sizing: content-box;
  }
  font-family: sans-serif;
  font-size: $p_panel_font_size;
  color: $p_panel_fg_color;
  border-width: $p_panel_border_width;
  border-style: $p_panel_border_style;
  border-color: $p_panel_border_color;
  border-color: transparent;
  border-radius: $p_panel_border_radius;
  /* padding: 0 10px; */
  /* overflow: hidden; */
  text-align: center;
  transition: .2s all;

  &.vertical {
    .edit-legend {
      vertical-align: bottom;
      margin-bottom: 4px;
    }
    
    .key {
      display: block;

      &:not(:last-child) {
        margin-bottom: $p_attr_item_gutter;
      }
    }
  }

  .legend-inner-container {
    /* white-space: nowrap; */
    /* overflow-x: auto; */
    position: relative;
    padding: 0 45px;
    
    .edit-legend {
        position: absolute;
        left: 0;
    }
    
    &:hover {
        
        .edit-legend {
            opacity: 1;
            visibility: visible;
        }
    }
  }

  .keys {
    display: inline-block;
    line-height: 12px;
    vertical-align: middle;
  }

  .edit-legend {
    display: inline-block;
    /*
    border-right-width: $p_edit_btn_separator_width;
    border-right-style: $p_edit_btn_separator_style;
    border-right-color: $p_edit_btn_separator_color; */
    padding: 8px 12px;
    font-size: $p_edit_btn_font_size;
    vertical-align: middle;
    color: $p_edit_btn_fg_color;
    transition: .2s all;
    opacity: 0;
    visibility: hidden;

    &:hover {
      cursor: pointer;
    }
  }
  
  &:hover, &.edit-mode {
    border-color: $p_panel_active_border_color;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
  }
  
  &:hover {  

      .edit-legend {
        color: $p_edit_btn_active_bg_color;
        opacity: 1;
        visibility: visible;
      }      
  }
  
  &.edit-mode {
      
      .edit-legend {
          opacity: 1;
          visibility: visible;
          
          .icon-edit {

            &:before {
                content: "\e66c";
                font-family: 'Pe-icon-7-stroke';
                font-size: 20px;
                position: relative;
                top: 1px;
            }
         }
      }
      
  }

  .key {
    display: inline-block;
    /*
    border-width: $p_attr_item_border_width;
    border-style: $p_attr_item_border_style;
    border-color: $p_attr_item_border_color; */
    padding: 0 6px;
    margin-right: $p_attr_item_gutter;
    transition: .2s all;
    
    &:hover {
        opacity: .82;
    }

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
    
    .color-indicator {
        margin-right: 3px;
        position: relative;
        top: -1px;
    }

    .edit-key {
      display: none;
    }

    &.edit {
      border-color: $p_attr_item_active_border_color;
      border-radius: $p_attr_item_active_border_radius;

      .edit-key {
        display: inline-block;
      }

      .color-indicator {
        display: none;
      }
    }
  }

  .legend-key {
    display: inline-block;
    padding: 13px 0;
    margin: 0;
    position: relative;
    vertical-align: middle;

    input[type=checkbox] {
      display: none;
    }

    .associate-axis {
      text-transform: uppercase;
      color: $p_axis_indicator_fg_color;
      font-size: $p_axis_indicator_font_size;
      border-width: $p_axis_indicator_border_width;
      border-style: $p_axis_indicator_border_style;
      border-color: $p_axis_indicator_border_color;
      border-radius: 4px;
      padding: 1px;
      margin-right: 2px;

      &.active {
        display: inline;
      }
    }

    &.disabled:hover {
      cursor: default;
    }

    &:hover {
      cursor: pointer;
    }
  }

  @at-root .color-indicator {
    position: relative;
    display: inline-block;
    font-size: 14px;
    width: 16px;
    height: 8px;
    vertical-align: middle;
    border: 1px solid $black;
    border-radius: 12px;
    background-color: $p_color_indicator_bg_color;

    .legend-key input:checked ~ & {
      background-color: $p_color_indicator_active_bg_color;
    }

    &:after {
      position: absolute;
      display: none;
      content: ' ';

      .legend-key input:checked ~ & {
        /* display: block; */
        display: none;
      }

      .legend-key.disabled input:checked ~ & {
        display: none;
      }

      .legend-key & {
        left: 1px;
        top: 1px;
        width: 8px;
        height: 8px;
        border: 1px solid $white;
        border-radius: 50%;
      }
    }
  }

  .select {
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 30px;
    border-radius: 11px;
    vertical-align: middle;
    box-sizing: border-box;

    &.select--chart {
      /* font-size: $p_chart_type_icon_size; */
      font-size: 12px;
      padding: 0 2px;
      padding-left: 7px;
      /* background-color: $p_selector_trigger_bg_color; */
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
      color: $p_selector_trigger_fg_color;
      text-align: left;
      transition: .2s all;
      
      &:hover {
          box-shadow: none;
          background-color: rgba(0,0,0,.06);
      }
      
      .triangle {
          border-bottom-color: rgba(0,0,0,.4);
      }
    }

    &:hover {
      cursor: pointer;
    }

    .triangle {
      position: absolute;
      display: block;
      right: 4px;
      top: 7px;
      width: 0;
      height: 0;
      /* border-bottom: 5px solid #{$p_selector_trigger_fg_color}; */
      border-bottom: 4px solid rgba(255,255,255,.8);
      border-left: 4px solid transparent;
      transform: rotate(45deg);
    }
  }

  .selector {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: $p_selector_panel_bg_color;
    border-width: $p_selector_panel_border_width;
    border-style: $p_selector_panel_border_style;
    border-color: $p_selector_panel_border_color;
    /* border-radius: $p_selector_panel_border_radius; */
    border-radius: 5px;
    width: 220px;
    padding: 15px;
    box-shadow: 0 4px 7px rgba(0,0,0,.1);
    margin-left: 12px;
    margin-top: 8px;
    transform: translateX(-50%) translateY(10px);
    text-align: center;
    box-sizing: border-box;
    transition: opacity 180ms ease-out, transform 180ms ease-out;
    
    &:before, &:after {
        bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    }
    
    &:before {
        border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 5px;
	margin-left: -5px;
        z-index: 1;
    }
    
    &:after {
        border-color: rgba(238, 238, 238, 0);
	border-bottom-color: #eee;
	border-width: 6px;
	margin-left: -6px;
    }

    div[class*="switches--"] {
      display: none;
    }

    &.active {
      /* display: block; */
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    &.select--color {       
      .switches--colors {
        display: block;
      }
    }

    &.select--chart {
      .switches--charts {
        display: block;
      }
    }
    
    .switches--colors {
        white-space: normal;
    }

    .switch {
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      display: inline-block;
      margin: 3px;
      transition: .2s all;
      
      &:hover {
        cursor: pointer;
      }
      
      &.switch--color {
        width: 28px;
        height: 28px;
        /* border: 1px solid transparent; */
        border-radius: 50%;
        background-color: $white;
        
        &:hover {
            /* transform: scale(1.1, 1.1);
            transform-origin: center; */
            box-shadow: 0 0 0 3px rgba(0,0,0,.06);
        }
        
        &.selected {
          
            &:after {
              content: " ";
              position: absolute;
              z-index: -1;
              top: -3px;
              left: -3px;
              bottom: -3px;
              right: -3px;
              /*
              border-width: $p_selector_switch_selected_border_width;
              border-style: $p_selector_switch_selected_border_style;
              border-color: $p_selector_switch_selected_border_color; */
              border-radius: 50%;
              box-shadow: 0 0 5px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.1);
            }

            &:hover {
                box-shadow: none;
            }
        }
        
        
      }
      
      
      &.switch--chart {
        width: 52px;
        height: 40px;
        line-height: 38px;
        border-radius: 6px;
        background-color: #fff;
        text-align: center;
        padding: 0 8px;
        border: 1px solid rgba(0,0,0,.1);
        font-size: 22px;
        color: rgba(0,0,0,.35);
        display: inline-block !important;
        vertical-align: top;
        
        &:hover {
            border-color: rgba(0,0,0,.2);
            box-shadow: 0 2px 6px rgba(0,0,0,.12);
            color: rgba(0,0,0,.65);
        }
        
        &.selected,
        &.selected:hover {
            box-shadow: 0 1px 4px rgba(0,0,0,.06);
            border-color: rgba(0,0,0,.25);
            color: rgba(0,0,0,.85);
        }
      }
      
    }

    .switch--chart {
      display: none;
      padding: 4px;
      text-align: center;
      font-size: $p_chart_type_icon_size;
      line-height: #{if($p_chart_type_icon_size, $p_chart_type_icon_size + 2px, null)};

      &.show {
        display: inline-block;
      }
    }
  }
}