/*
Wellen für die Container erzeugen
*/

.make-wave1(@color: #f0f) {
  @wave: escape('<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="200"><path d="M0,0V200H1280V32S1029,72,730,72,283,0,0,0Z" fill="@{color}"/></svg>');
  background-image: url(~'data:image/svg+xml,@{wave}');
  pointer-events: none;
}

.make-wave2(@color: #f0f) {
  @wave: escape('<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="200"><path d="M0,32V200H1280V0C998,0,849,72,550,72S0,32,0,32Z" fill="@{color}"/></svg>');
  background-image: url(~'data:image/svg+xml,@{wave}');
  pointer-events: none;
}



.container {
  z-index: 1;

  margin-top: floor((200/1280/1)*100%);
  margin-bottom: floor((200/1280/-1)*50%);
  padding-bottom: floor((200/1280/1)*100%);

  &:before {
    content: '';
    display: block;

    position: absolute;
    height: 0;
    left: 0;
    right: 0;
    bottom: ~"calc(100% - 1px)";
    z-index: -1;
    padding-bottom: ceil((200/1280/2)*100%);
    padding-top: ceil((200/1280/2)*100%);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  &-default {
    background-color: #fff;
    &:before {
      .make-wave1(#fff);
    }
    & + .container-default {
      margin-top: 0;
      &:before {
        display: none;
      }
    }
  }

  &-primary {
    background-color: @brand-primary;
    &:before {
      .make-wave2(@brand-primary);
    }
    * {
      color: #fff;
    }
    & + .container-primary {
      margin-top: 0;
      &:before {
        display: none;
      }
    }
  }

  &-secondary {
    background-color: @gray-lighter;
    &:before {
      .make-wave2(@gray-lighter);
    }
    & + .container-primary {
      margin-top: 0;
      &:before {
        display: none;
      }
    }
  }
}
