// ##### NOT ACTIVE out: ./styles_system_charts.css, compress: false

/* Should be identical to the values in bootstrap:  */
// @screen-xs-max : 480px;
@screen-sm : 768px;
@screen-md : 992px;

@text_color: #89b341;

@width_n_height_of_img: 40vw;
@width_n_height_of_img_max: 300px;
@width_of_label: 40vw;
@distance_of_label_to_img: 5vw;
@header_height : 3.5em;



.stop-growing-width() {
  @media (min-width: @screen-md) {
    width: @width_n_height_of_img_max;
  }
}
.stop-growing-left() {
  @media (min-width: @screen-md) {
    left: @width_n_height_of_img_max + 88px /* 88px looked good when experimenting */;
  }
}


@animation_standard_time : 1s;

/** Individual layer positions: (@1000px image height)
Are set via less.modifyVars() in the html-doc with inline JS. */

@bottom_overlay_1: 0px;
@bottom_overlay_2: 0px;
@bottom_overlay_3: 0px;
@bottom_overlay_4: 0px;
@bottom_overlay_5: 0px;
@bottom_overlay_6: 0px;
@bottom_overlay_7: 0px;
@bottom_overlay_8: 0px;
@bottom_overlay_9: 0px;
@bottom_overlay_10: 0px;

@random_id : ".def_from_lessfile";

@size_ratio : @width_n_height_of_img / 1000px;


@{random_id} h4.product-header:before {
    content : " @{random_id} ";
}


.system-chart {
  position: relative;
  overflow: hidden;
  padding-bottom: 3em;

  .header {
    height: @header_height;
    h4 {
      position: absolute;
    }
    h4.product-header {
      left: @width_n_height_of_img + @distance_of_label_to_img + 3vw;
      .stop-growing-left();
    }
  }



  img.chart {
    position: relative;
    width: @width_n_height_of_img;
    .stop-growing-width();
    border: 3px solid #ccc;
  }

  .products {
    position: absolute;
    top: @header_height;

    .overlay {
      height: 1.5em;
      transition: @animation_standard_time;

      span {
        display: block;
        float: right;
        clear: right;
        position: relative;
        padding: 0.1em 0.3em;
        width: @width_of_label;
        max-width: 300px;

        transition: @animation_standard_time / 4;
        left: 0;

        background-color: white;
        color: @text_color;
        border-top: 1px solid @text_color;

        @media (max-width: @screen-sm) {
          font-size: 2.5vw;
          // color: blue;
        }

      }

      &:before {
        content: '';
        display: block;
        float: left;
        width: @width_n_height_of_img;
        .stop-growing-width();

        height: 100%;
        margin-right: @distance_of_label_to_img;

        transition: @animation_standard_time / 2 ;
        transition-delay: @animation_standard_time;

        // border: 1px solid blue;
      }

      /* Dummy element prevents a 'blind-down-effect' over the lower part of the chart during animation (delays did not fix it entirely) */

      &.dummy span {
        display: none;
      }

      &.dummy:before {
        height: @width_n_height_of_img;
      }
    }
  }
}


/** First stage of anmiation when hovering the modules' outermost element */

@size_ratio_max : @width_n_height_of_img_max / 1000px;

.foo (@b_pos_n-1, @b_pos_n) {
  height: (@b_pos_n-1 - @b_pos_n) * -1 * @size_ratio;

  @media (min-width: @screen-md) {
    height: (@b_pos_n-1 - @b_pos_n) * -1 * @size_ratio_max;
  }

}

.system-chart/*:hover*/ {
  .products {
    .overlay:before {
      background-color: white;
      opacity: 0.8;
      transition-delay: 0s;
    }

    .o1 {
      .foo(0, @bottom_overlay_1);
    }
    .o2 {
      .foo(@bottom_overlay_1, @bottom_overlay_2);
    }
    .o3 {
      .foo(@bottom_overlay_2, @bottom_overlay_3);
    }
    .o4 {
      .foo(@bottom_overlay_3, @bottom_overlay_4);
    }
    .o5 {
      .foo(@bottom_overlay_4, @bottom_overlay_5);
    }
    .o6 {
      .foo(@bottom_overlay_5, @bottom_overlay_6);
    }
    .o7 {
      .foo(@bottom_overlay_6, @bottom_overlay_7);
    }
    .o8 {
      .foo(@bottom_overlay_7, @bottom_overlay_8);
    }
    .o9 {
      .foo(@bottom_overlay_8, @bottom_overlay_9);
    }
    .o10 {
      .foo(@bottom_overlay_9, @bottom_overlay_10);
    }
  }
}

/** Second stage of animation: make the hovered overlay transparent */

.system-chart .products .overlay:hover {
  cursor: pointer;

  &:before {
    opacity: 0;
    transition-delay: 0s;
  }

  span {
    background-color: @text_color;
    color: white;
    left: -8px;
    &::before {
      content: '» ';
    }
  }
}

/* Rotation for Sloped Roof Systems: */

.chart.rotate {
  transition: @animation_standard_time/2;
  transform: rotate(0deg);
  clip-path: circle(@width_n_height_of_img/1.4 at center);
  @media (min-width: @screen-md) {
    clip-path: circle(@width_n_height_of_img_max/1.4 at center);
  }
}

.system-chart:hover .chart.rotate {
  clip-path: circle(@width_n_height_of_img/2 - 3px at center);
  @media (min-width: @screen-md) {
    clip-path: circle(@width_n_height_of_img_max/2 - 3px at center);
  }


  /** The rotxxdeg-class indicates how many degrees the image should be rotated.
   Class names go by the naming of the system-buildups, so there might be a difference
   between nominal and actual degrees. */

  &.rot25deg {
    transform: rotate(20deg);
  }

  &.rot35deg {
    transform: rotate(30deg);
  }
}


/* Product Preview: */

.product-img {
  margin-left: auto;
  margin-right: auto;
  border: 3px solid #ccc;
}

.no-details-available {
  margin-top: 4em;
  color: #999;
}