*,
*:before,
*:after {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(68, 61%, 65%);
  height: 100vh;
  overflow: hidden;
  position: relative;
}

// Each colour block is a leaf – create a placeholder for shared styles
%leaf {
  display: block;
  position: absolute;
  width: 100%;
}

// We use this value a bunch of times, so a var is useful
$leaf-radius: 28vh;

// Stash our colours in a list...
$leaf-colors: (
  hsl(122, 44%, 31%),
  hsl(115, 43%, 38%),
  hsl(114, 42%, 44%),
  hsl(99, 46%, 49%),
  hsl(78, 55%, 51%)
);

// ...and loop over it to generate our leaves
@each $color in $leaf-colors {

  // It’s handy to stash this in a var
  $index: index($leaf-colors, $color);

  // Using the index in the class name gives us ‘.leaf-1’, ‘.leaf-2’, etc.
  .leaf-#{$index} {
    @extend %leaf;

    // The leaf overlap is 16vh. Sass lists are one-indexed; so to get our
    // first leaf to sit at the bottom of the stack, we subtract one
    // from the index to multiply the transform by zero. The bottom
    // of the stack sits 8vh below the bottom of the page, so we subtract that
    // after we do the initial position calculation.
    bottom: (16vh * ($index - 1)) - 8vh;

    // We’re stacking as we go, so each additional leaf goes underneath
    // the previous one
    z-index: $index * -1;

    // Use the colours on the leaves
    .leaflet-left,
    .leaflet-right {
      background-color: $color;
      &:before,
      &:after {
        background-color: $color;
      }
    }
  }
}

.leaflet-left,
.leaflet-right {
  height: $leaf-radius;
  position: relative;

  // Subtracting the leaf radius lets us see the rounded bits
  width: calc(50% - #{$leaf-radius});

  // Use pseudoelements for the rounded bits and to fill in the gaps
  // to avoid daylight between the rounded ends of our leaflets
  &:before,
  &:after {
    content: '';
    position: absolute;
  }
  // Rounded bits
  &:before {
    border-radius: $leaf-radius;
    height: $leaf-radius * 2;
    width: $leaf-radius * 2;
  }
  // Gap filler
  &:after {
    bottom: 0;
    height: $leaf-radius;
    top: 100%;
    width: $leaf-radius;
  }
}

// The leaflets are mirror images of each other, so we can generate them
// with a short list
@each $side in (left, right) {

  // Find the opposite side to correctly position the rounded bit
  // (var needs to be initialized outside the conditional)
  $opposite-side: '';

  @if $side == 'left' {
    $opposite-side: 'right'
  } @elseif $side == 'right' {
    $opposite-side: 'left'
  }

  // Just like we did up top, this gives us ‘.leaflet-left’ and ‘.leaflet-right’
  .leaflet-#{$side} {
    float: $side;

    // Bump rounded bit out off the edge of the element by its radius
    &:before {
      #{$opposite-side}: $leaf-radius * -1;
    }

    // Cover the bottom of the rounded bit with the gap filler
    &:after {
      #{$side}: 100%;
    }
  }
}