/*
Component represents a landing section.
Use:
  <section class="top-section style-dark">
    <div class="top-section-container">
      <p>Some content</p>
    </div>
  </section>
*/

.top-section {
  width: 100%;
  height: max-content;

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  $basis-w: 1.615%;
  $basis-2-w: calc($basis-w * 2);

  $basis-h: var(--unit-5);
  $basis-2-h: calc($basis-h * 2);

  clip-path: polygon(
    0 $basis-2-h, calc($basis-w * 1) $basis-2-h,
    calc($basis-w * 1) $basis-h, calc($basis-w * 4) $basis-h,

    calc($basis-w * 4) 0, calc($basis-w * 5) 0,
    calc($basis-w * 6) 0, calc($basis-w * 9) 0,

    calc($basis-w * 9) $basis-h, calc($basis-w * 10) $basis-h,
    calc($basis-w * 11) $basis-h, calc($basis-w * 11) $basis-h,
    
    calc($basis-w * 11) 0, calc($basis-w * 12) 0,
    calc($basis-w * 13) 0, calc($basis-w * 26) 0,

    calc($basis-w * 26) $basis-h, calc($basis-w * 27) $basis-h,
    calc($basis-w * 28) $basis-h, calc($basis-w * 34) $basis-h,

    calc($basis-w * 34) 0, calc($basis-w * 35) 0,
    calc($basis-w * 35) 0, calc($basis-w * 50) 0,

    calc($basis-w * 50) $basis-h, calc($basis-w * 51) $basis-h,
    calc($basis-w * 52) $basis-h, calc($basis-w * 52) $basis-h,

    calc($basis-w * 52) 0, calc($basis-w * 53) 0,
    calc($basis-w * 54) 0, calc($basis-w * 59) 0,

    calc($basis-w * 59) $basis-h, calc($basis-w * 60) $basis-h,
    calc($basis-w * 61) $basis-h, calc($basis-w * 61) $basis-h,

    calc($basis-w * 61) $basis-2-h, calc($basis-w * 62) $basis-2-h,

    100% 100%, 0 100%
  );

  // Spacing to overlay the decor
  margin-top: -40px;
  &:first-child {
    margin-top: 0;
  }

  // Styles
  &.style-default {
    margin-top: 0;
    
    .top-section-container {
      padding-top: 38px;
    }

    clip-path: none;
    overflow: hidden;
  }
  &.style-transparent {
    background: transparent;
  }

  .top-section-container {
    padding: var(--unit-10) 0;
  }
}

.top-section-container {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 1120px;

  position: relative;

  .top-section-cover {
    width: auto;
    height: auto;

    z-index: 5;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .top-section-image {
    width: auto;
    height: auto;

    z-index: 5;

    position: absolute;
    top: auto;
    left: auto;
    right: auto;
  }

  .top-section-decor, .top-section-wave {
    position: absolute;
  }

  // Block of section
  .top-block {
    width: 100%;
    max-width: 800px;

    z-index: 15;

    // Centrize buttons
    > .top-button {
      margin: auto;
    }

    // Spacing between blocks
    + .top-block {
      padding-top: var(--unit-8);
    }

    // Medium width of block
    &-md {
      max-width: 800px;
      padding-left: var(--unit-5);
      padding-right: var(--unit-5);
    }
    // Large width of block
    &-lg {
      max-width: 900px;
      padding-left: var(--unit-5);
      padding-right: var(--unit-5);
    }
    // Filled width of block
    &-fill {
      max-width: 100%;
    }

    &-end {
      align-self: flex-end;
    }
  }
}