/* ========================================
   Colors
   ======================================== */
// Background colors
$bgd-colors: #DC143C #1E90FF #6B8E23 #FFD700;
// Font-colors
$ft-color-default: rgb(51, 51, 51);
$ft-color-dimmed: rgb(131, 131, 131);

// Mixin to set the background-color
@mixin set-background($index) {
  background-color: nth($bgd-colors, $index);
}

// Mixin to set the 'dimmed' background-colors
@mixin set-background-dimmed($index) {
  background-color: lighten(desaturate(nth($bgd-colors, $index), 25), 18);
}

// Set the background-colors of the 'non-active' sections
@for $i from 1 through 4 {
  .section:nth-child(#{$i}) {
    @include set-background-dimmed($i);
  }
}

// Set the default background-colors of sections and the background-colors of 'active' sections
@for $i from 1 through 4 {
  .section:nth-child(#{$i}).section-height-expanded.section-active,
  .section:nth-child(#{$i}).section-default {
    @include set-background($i);
  }
}

/* ========================================
   Transitions, height and text color
   ======================================== */
.section {
  transition: height 0.5s ease-in-out, width 0.5s ease-in-out, background-color 0.5s ease-in-out;
  height: 50vh; /* See buggyfill/polyfill links on caniuse.com */
  color: $ft-color-default;
}

.section-height-collapsed {
  transition: height 0.5s ease-in-out, width 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  height: 20vh;
  color: $ft-color-dimmed;
}

.section-height-expanded {
  transition: height 0.5s ease-in-out, width 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  height: 80vh;
  color: $ft-color-dimmed;
}

/* ========================================
   Text color and shadow for the 'active' section
   ======================================== */
.section-active {
  color: $ft-color-default;
  z-index: 1;
  box-shadow: 0 0 3px 3px rgba(0,0,0,0.15);
}