@require "animated.styl"

$ils-container-margin-bottom = 30px;
$ils-container-border-radius = 5px;

hover-style(scaleX, scaleY) {

  transition();

  box-shadow: 2px 2px 8px var(--shadow-color);

  &:hover {

    if (hexo-config('style.hover.scale')) {
      transform: scaleX(scaleX) scaleY(scaleY);
    }

    if (hexo-config('style.hover.shadow')) {
      box-shadow: 3px 3px 12px var(--shadow-hover-color);
    }
  }
}


ils-container(scaleX, scaleY, padding) {
  background: var(--background-color);
  padding: padding;
  border-radius: $ils-container-border-radius;
  margin-bottom: $ils-container-margin-bottom;

  hover-style(scaleX, scaleY);

  +ils-tablet() {
    padding: padding * 0.8;
    border-radius: $ils-container-border-radius * 0.8;
    margin-bottom: $ils-container-margin-bottom * 0.8;
    hover-style(scaleX * 0.8, scaleY * 0.8);
  }

  +ils-mobile() {
    padding: padding * 0.6;
    border-radius: $ils-container-border-radius * 0.6;
    margin-bottom: $ils-container-margin-bottom * 0.6;
    hover-style(scaleX * 0.6, scaleY * 0.6);
  }

}