@use './media-queries' as mq;

$_SHAPE-WIDTH: 100%;
$SHAPE-HEIGHT: calc(#{$_SHAPE-WIDTH} * 2);

$mask-landing-header: '<svg width="531" height="645" viewBox="0 0 531 645" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M201.3 -144.964L74.8791 90.6236C-7.98471 245.032 -75.4091 463.207 183.723 596.99C369.507 692.926 496.722 628.559 584.378 527.536L584.378 -144.964L201.3 -144.964Z" fill="black"/></svg>';
$mask-landing-header-2: '<svg width="584" height="789" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583.8 789.08"><path d="M200.73,0,74.31,235.59C-8.56,390-76,608.17,183.15,742c185.78,95.94,313,31.57,400.65-69.45V0Z"/></svg>';

@mixin brewShape($width: auto, $height: calc(#{$width} / 3)) {
  border-radius: calc(#{$height} / 2);
  width: $width;
  height: $height;
}

@mixin defaultShapeProperties() {
  position: absolute;
  display: block;
  transform-origin: left top;
}

@mixin generateShape($pseudoElement: false) {
  @if $pseudoElement != false {

    @if ($pseudoElement == after or $pseudoElement == before) {
      &::#{$pseudoElement} {
        content: "";
        @include defaultShapeProperties;
        @content;
      }
    } @else {
      @error "generateShape error : the parameter is not a valid value, please choose between after, before, or nothing";
    }

  } @else {
    @include defaultShapeProperties;
    @content;
  }
}

@mixin generateSectionBorderShape($pseudoElement) {
  @include generateShape($pseudoElement) {
    @content;
    left: -15px;
    width: 200%;
    height: 200px;
    transform: skew(0, 1deg);
    border-radius: 250px / 55px;

    @include mq.screen_sm {
      border-radius: 0;
    }
  }
}

@mixin brewImgHoverCommon {
  content:'';
  display : inline-block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  height : 0;
  width : 100%;
  transition: transform 0.2s var(--joy-transition-duration-short);
}

@mixin brewImgHover($_color) {
  &:before {
    @include brewImgHoverCommon;
    border-right : 150px solid transparent;
    border-bottom : 150px solid $_color;
    transform-origin: right;
    right: 75%;
  }

  &:after {
    @include brewImgHoverCommon;
    border-left : 150px solid transparent;
    border-bottom : 150px solid $_color;
    left: 75%;
  }

  &:hover {
    &:before {
      transform: translate(26%);

    }
    &:after {
      transform: translateX(-26%);
    }
  }
}