$primary-color : $black;
$primary-color-inverted : $white;

$secondary-color-light  : $grey-light;


@mixin headerskin($skin-overlay-color, $text-color, $skin ) {

  $primary-color             : $text-color;
  $background-color          : $skin-overlay-color;
  $primary-color-inverted    : invert($primary-color);
  $background-color-inverted : invert($background-color);
  $secondary-color-light     : rgba($primary-color, 0.7);//$grey;
  $secondary-color           : if( $primary-color == $white, $grey-light, $grey-dark );

  @if ( $primary-color == $white ) {
      .tc-header {
        h1, h2, h3, h4, h5, h6 {
          color: $primary-color;
        }
      }
  }

  // overlays skin
  .czr-overlay {
    background: rgba($background-color, 0.98);
    color: $primary-color;
    a {
      color: $secondary-color-light;
      &:hover {
        color: $primary-color;
      }
    }
  }
  // end overlays skins

  //menu button dark
  @if ( 'dark' == $skin ) {
    .add-menu-button {
      color: $primary-color;
    }
  }

  #tc-sn {
    outline-color: rgba($primary-color, 0.09);
  }

  .ham__toggler-span-wrapper .line {
    background: $primary-color;
  }


  .tc-header .socials {
    a, a:focus, a:active { color: $primary-color; }
    a:hover { color: $secondary-color-light; }
  }

  #tc-sn .tc-sn-inner,
  .tc-header {
    color: $primary-color;
    background: $background-color;
  }

  // header transparency
  .header-transparent:not(.is-sticky) {
    .mobile-nav__nav {
      background: rgba( $background-color, 0.9 );
    }
    .dropdown-menu {
      background: rgba( $background-color, 0.9 );
    }
  }
  // Sticky header transparency
  .sticky-transparent.is-sticky {
    @if ( 'light' == $skin ) {
      .mobile-sticky,
      .desktop-sticky {
        background: rgba( $background-color, 0.9 );
      }
    } @else {
      .mobile-sticky,
      .desktop-sticky {
        background: rgba( $background-color, 0.7 );
      }
    }
    .mobile-nav__nav {
      background: rgba( $background-color, 0.9 );
    }
  }

  .dropdown-item:not(:last-of-type),
  .topbar-navbar__wrapper {
    border-color: rgba($primary-color, 0.09);
  }
  .tc-header {
     border-bottom-color: rgba($primary-color, 0.09);
  }

  .header-contact__info,
  .nav__utils {
      a, a:focus, a:active {
        color: $primary-color;
      }
      a:hover {
        color: $secondary-color-light;
      }
  }
  .nav__utils {
      .ham-toggler-menu.czr-collapsed:hover {
        .line {
          background-color: $secondary-color-light;
        }
      }
  }

  //progress bar effect
  //
  //was previously based on the primary-color (foreground) inversion,
  //now based on the background-color inversion.
  //This because if we choose the primary-color as red, it's inverted
  //color is some green => not what we want.
  // it was: background-color: rgba( $primary-color-inverted, 0.15);
  //primary-color==foreground-color
  .dropdown-item::before {
    background-color: rgba( $background-color-inverted, 0.045);
  }
  //clickable caret dropdown toggler (it's not printed in vertical nav if the submenus are expanded by default )
  .vertical-nav .caret__dropdown-toggler {
    background-color: rgba( $background-color-inverted, 0.045);
  }

  .dropdown-menu,
  .dropdown-item:active,
  .dropdown-item:focus,
  .dropdown-item:hover {
    background: $background-color;
  }

  .dropdown-menu {
    color: $primary-color;
  }

  .navbar-brand-sitename {
      color:$primary-color;
  }

  .header-tagline {
    color: $secondary-color
  }

  [class*=nav__menu] {

    .nav__link,
    .nav__link-wrapper .caret__dropdown-toggler {
      color: $primary-color;
    }

    .nav__title::before {
      background-color: $primary-color;
    }

    .nav__link:hover,
    .nav__link-wrapper .caret__dropdown-toggler:hover,

    .show:not(.dropdown-item) > .nav__link,
    .show:not(.dropdown-item) > .nav__link-wrapper .nav__link {
      color: $secondary-color;
    }

    .dropdown-menu .nav__link {
      color: $primary-color;
    }
    .dropdown-item .nav__link {
        color: $secondary-color;
        &:hover {
          color: $primary-color;
        }
    }
  }

  .czr-highlight-contextual-menu-items [class*=nav__menu] {
    li:not(.dropdown-item).current-active > .nav__link,
    li:not(.dropdown-item).current-active > .nav__link-wrapper .nav__link,
    .current-active > .nav__link,
    .current-active > .nav__link-wrapper .nav__link {
      color: $secondary-color;
    }
  }

  .vertical-nav > li:not(:last-of-type),
  .mobile-nav__container,
  .header-search__container,
  .mobile-nav__nav {
      border-color: rgba($primary-color, 0.075);
  }

  .tc-header .czr-form, .czr-overlay .czr-form {
      label {
        color: $primary-color;
      }
      .form-group.in-focus label {
        color: $secondary-color-light;
      }
      input:not([type='submit']):not([type='button']):not([type='number']):not([type='checkbox']):not([type='radio']),
      textarea,
      .form-control {
        color: $primary-color;
        border-color: $primary-color;
      }
  }

}
// end mixin
.header-skin-light  {
  @include headerskin($white, $black, 'light');
}

.header-skin-dark  {
  @include headerskin($black, $white, 'dark');
}