/* ==========================================================================
   Contains styling for drip transition between pages
   ========================================================================== */

.drip-transition-container
  +position(fixed, 0 null null 0)
  z-index: 1000
  display: flex
  justify-content: flex-start
  width: 100%
  pointer-events: none

  .drip
    position: relative

    /**
      * Body defines the height
      *
      * 1. Applying a very large border radius to create round bottom (50% doesn't work here)
      */
    .drip-body
      width: 101%
      margin-left: -.5%
      border-radius: 0 0 500px 500px /* 1 */

    /**
      * The tail contains the inverted circle
      *
      * 1. Use padding-bottom 100% to create a square shape
      * 2. Mask the top part with the inverted circle svg
      */
    .drip-tail
      width: 100%
      padding-bottom: 100% /* 1 */
      mask-image: url(/img/komma/structure/drip_top.svg) /* 2 */

    /**
     * Create one gradient over all the drips
     *
     * 1. Make sure the gradient expands to viewport's size
     * todo: background attachment fixed doesn't work with transform,
     */
    .drip-body, .drip-tail
      position: relative
      background: $brightBlue

    &:nth-child(2n)
      .drip-body
        border-radius: 500px 500px 0 0

      .drip-tail
        mask-image: url(/img/komma/structure/drip_bottom.svg)