$v-font-weight--header:   $v-font-weight - 100 !default;
$v-line-height--header:   1.1             !default;
$v-font-family--header:   null            !default;

$v-font-size--h1:         2.4em           !default;
$v-font-size--h2:         1.6em           !default;
$v-font-size--h3:         1.2em           !default;
$v-font-size--large:      1.2em           !default;
$v-font-size--small:      0.87em          !default;

$v-font-family--h1:       $v-font-family--header   !default;
$v-font-family--h2:       $v-font-family--header   !default;
$v-font-family--h3:       $v-font-family--header   !default;

$v-letter-spacing--h1:    -0.03em         !default;
$v-letter-spacing--h2:    -0.02em         !default;
$v-letter-spacing--h3:    0               !default;
$v-letter-spacing--h4:    0               !default;


@mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) {

  .#{$primary-stylename}-undef-w {
    white-space: nowrap;
  }

  h1, .#{$primary-stylename}-h1,
  h2, .#{$primary-stylename}-h2,
  h3, .#{$primary-stylename}-h3 {
    line-height: $v-line-height--header;
    font-weight: $v-font-weight--header;
    color: valo-header-color($v-app-background-color);
  }

  h1, .#{$primary-stylename}-h1 {
    font-size: $v-font-size--h1;
    margin-top: 1.4em;
    margin-bottom: 1em;
    font-family: $v-font-family--h1;
    letter-spacing: $v-letter-spacing--h1;
  }

  h2, .#{$primary-stylename}-h2 {
    font-size: $v-font-size--h2;
    font-family: $v-font-family--h2;
    margin-top: 1.6em;
    margin-bottom: 0.77em;
    letter-spacing: $v-letter-spacing--h2;
  }

  h3, .#{$primary-stylename}-h3 {
    font-size: $v-font-size--h3;
    font-family: $v-font-family--h3;
    margin-top: 1.8em;
    margin-bottom: 0.77em;
    letter-spacing: $v-letter-spacing--h3;
  }

  h4, .#{$primary-stylename}-h4 {
    line-height: $v-line-height--header;
    font-weight: $v-font-weight + 200;
    font-size: $v-font-size--small;
    color: valo-header-color($v-app-background-color, $contrast: 0.12);
    text-transform: uppercase;
    letter-spacing: $v-letter-spacing--h4;
    margin-top: 2.4em;
    margin-bottom: 0.8em;
  }

  .v-csslayout {
   > h1,
   > h2,
   > h3,
   > h4
   > .#{$primary-stylename}-h1,
   > .#{$primary-stylename}-h2,
   > .#{$primary-stylename}-h3
   > .#{$primary-stylename}-h4 {
      &:first-child {
        margin-top: $v-font-size;
      }
    }
  }

  .v-verticallayout > .v-slot:first-child,
  .v-verticallayout > div > .v-slot:first-child {
    h1, .#{$primary-stylename}-h1,
    h2, .#{$primary-stylename}-h2,
    h3, .#{$primary-stylename}-h3
    h4, .#{$primary-stylename}-h4 {
      margin-top: $v-font-size;
    }
  }

  h1, .#{$primary-stylename}-h1,
  h2, .#{$primary-stylename}-h2,
  h3, .#{$primary-stylename}-h3,
  h4, .#{$primary-stylename}-h4 {
    &.no-margin {
      margin: 0 !important;
    }
  }


  @if $include-additional-styles {

    .#{$primary-stylename}-large {
      font-size: $v-font-size--large;
    }

    .#{$primary-stylename}-small {
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-bold {
      font-weight: $v-font-weight + 200;
    }

    .#{$primary-stylename}-light {
      font-weight: $v-font-weight - 100;
      @if $v-font-weight < 400 {
        color: valo-font-color($v-app-background-color, .5);
      }
    }

    .#{$primary-stylename}-align-right {
      text-align: right;
    }

    .#{$primary-stylename}-align-center {
      text-align: center;
    }

    .#{$primary-stylename}-spinner {
      @include valo-spinner;
    }

    .#{$primary-stylename}-success,
    .#{$primary-stylename}-failure {
      background: $v-textfield-background-color;
      color: valo-font-color($v-textfield-background-color);
      border: 2px solid $v-friendly-color;
      border-radius: $v-border-radius;
      padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
      font-weight: $v-font-weight + 100;
      font-size: round($v-font-size * 0.95);

      &:before {
        font-family: FontAwesome;
        content: "\f00c";
        margin-right: .5em;
        margin-left: round($v-unit-size/-2);
        color: $v-friendly-color;
      }
    }

    .#{$primary-stylename}-failure {
      border-color: $v-error-indicator-color;

      &:before {
        content: "\f05e";
        color: $v-error-indicator-color;
      }
    }
  }

}