/**************************************************
 * Variables
 *************************************************/

$themes:
  (firmensuche, #34495e),
  (wien, #e30613),
  (immobilienwohnen, #995d41),
  (kunstkultur, #53375b),
  (veranstaltungen, #097e80),
  (freizeit, #3576be),
  (gesundheit, #16a086),
  (lifestyle, #ec8e0e),
  (bildung, #d25400),
  (politik, #95a5a5);

$util-farben:
  (fallback, #666),
  (dunkelgrau, #666),
  (mittelgrau, #acacac),
  (hellgrau, #e5e5e5),
  (rot, #da0015),
  (hellrot, #f30017),
  (facebook, #3B579D),
  (twitter, #399ad6),
  (googleplus, #b61a22);

$farben: join($themes, $util-farben);

$highlight-amount: 5%;


/**************************************************
 * Functions
 *************************************************/

@function lookup($list, $key, $default:null) {
  @if length($list) == 0 {
    @return $default;
  }

  @for $i from 1 through length($list) {
    $item: nth($list, $i);
    @if nth($item, 1) == $key {
      @return slice($item, 2);
    }
  }

  @return $default;
}

@function slice($list, $from:0, $to:null) {
  $ret: ();

  @if $to == null {
    $to: length($list);
  }

  @for $i from 1 through length($list) {
    @if $i >= $from and $i <= $to {
      $ret: append($ret, nth($list, $i));
    }
  }

  @if length($ret) == 1 {
    $ret: nth($ret, 1);
  }

  @return $ret;
}

@function farbe($lookup) {
	@return lookup($farben, $lookup);
}


/**************************************************
 * mixin
 *************************************************/

@each $name, $farbe in $themes {
	.#{$name}:hover > a,
	.#{$name}.active > a,
	.#{$name} .level-2 {
		color: white;
		background-color: $farbe;
	}

	// 2. set the background color of the hovered list element
	.#{$name} .level-2 > li:hover,
	.#{$name} .level-2 > li.hover,
	.#{$name} .level-2 > li.active {
		background-color : lighten($farbe, $highlight-amount);
	}

	// 3. Set link-Color to white in second menu level in hover and active states
	.#{$name} .level-3 {
		background-color : lighten($farbe, $highlight-amount);
	}
}




%theme-background-color {
  background-color: farbe(fallback);
}
%theme-light-background-color {
  background-color: lighten(farbe(fallback), $highlight-amount);
}
%theme-border-color {
  border-color: farbe(fallback);
}
%theme-color {
  color: farbe(fallback);
}
%theme-light-color {
  color: lighten(farbe(fallback), $highlight-amount);
}


@each $name, $farbe in $themes {
  .theme-#{$name} %theme-background-color {
    background-color: $farbe;
  }
  .theme-#{$name} %theme-light-background-color {
    background-color: lighten($farbe, $highlight-amount);
  }
  .theme-#{$name} %theme-border-color {
    border-color: $farbe;
  }
  .theme-#{$name} %theme-color {
    color: $farbe;
  }
  .theme-#{$name} %theme-light-color {
    color: lighten($farbe, $highlight-amount);
  }
  .theme-#{$name}-background-color {
    background-color: $farbe !important;
  }
}