$primaryColor: steelblue;
$gray: #C1C1C1;
$dark-gray: darken($gray, 50%);

$blue: rgb(80, 144, 193);
$purple: rgb(142, 68, 173);
$brown: rgb(176, 95, 60);
$teal: rgb(37, 160, 197);
$green: rgb(39, 174, 96);
$navy: rgb(44, 62, 80);
$smoke: rgb(236, 240, 241);
$brick: rgb(190, 75, 75);

$themes: (
  'blue': $blue,
  'brown': $brown,
  'purple': $purple,
  'teal': $teal,
  'green': $green,
  'navy': $navy,
  'brick': $brick
);

@function set-color-brigthness($color, $if: black, $else: white) {
  @if (lightness($color) < 20) {
    @return $if;
  } @else {
    @return $else;
  }
}

@mixin break-lines($color: $primaryColor) {
  background: repeating-linear-gradient(45deg, transparentize($color, 0.60), transparentize($color, 0.60) 5px, white 5px, white 10px);
}

// Themed elements
@each $name, $color in $themes {
  .ova-planning-days-label.theme-#{$name} {
    background-color: $color;
    div {
      color: set-color-brigthness($color);
    }
  }
  #ova-template-day.theme-#{$name} {
    h2 {
      color: set-color-brigthness($color);
      background-color: $color;
    }
    .slot {
      &.waiting {
        border-top: 12px double transparentize($color, 0.60);
      }
    }
    .break {
      @include break-lines(set-color-brigthness($color, white, $color))
    }
  }
}