/* ==========================================================================
   Mixin used to give the cases their custom colors
   ========================================================================== */

=theme($list)

  $name: nth($list, 1)
  $headerDrips: nth($list, 2)
  $intro: nth($list, 3)
  $navigation: nth($list, 4)
  $testimonial: nth($list, 5)
  $featured: nth($list, 6)

  .case.#{$name}

    // Navigation drip in the corner
    .navigation-drip
      background: $headerDrips
      .burger-container svg
        fill: $headerDrips

    // Header drips background
    header.main
      background: $headerDrips
      .header-drip
        background: $headerDrips

    .scroll-hinter .sizer
      background: $intro

    // Intro background
    .intro-section
      background: $intro

    // Navigation gradient
    .dynamic
      aside
        background: linear-gradient(to bottom, lighten($navigation,10) 0%,$navigation 100%)

    // Testimonial
    // 1. Use background-color instead of background,
    //    because this element also has a background-image
    .testimonial
      background-color: $testimonial

  // Testimonials on references page
  .testimonial-container.#{$name}
    background-color: $testimonial

  .featured-cases .featured-case.#{$name}
    .color-overlay
      background-color: $featured