// Header vertical align
//
// Vertically center elements in the header.
// Example: an element has a height of 30px, so write out
// `.header-vertical-align(30px);` to calculate the appropriate top margin.

@mixin header-vertical-align($element-height) {
  margin-top: (($header-height - $element-height) / 2);
  margin-bottom: (($header-height - $element-height) / 2);
}

@mixin header-border($config: (), $side: 'bottom') {
  $config: map-merge($header-default, $config);

  border-#{$side}-color: map-get($config, border-color);
  border-width: 0;
  border-style: solid;
  border-#{$side}-width: $header-border-width;
}

@mixin header-border-top($config: ()) {
  @include header-border($config, 'top');
}

@mixin header-border-right($config: ()) {
  @include header-border($config, 'right');
}

@mixin header-border-bottom($config: ()) {
  @include header-border($config, 'bottom');
}

@mixin header-border-left($config: ()) {
  @include header-border($config, 'left');
}

@mixin header-link-active($config: ()) {
  $config: map-merge($header-default, $config);

  color: map-get($config, link-hover-color);
  background-color: map-get($config, link-hover-bg);
}

@mixin header-link-color($config: ()) {
  $config: map-merge($header-default, $config);

  color: map-get($config, link-color);

  &:hover {
    @include header-link-active($config);
  }
}

@mixin header-link-padding($config: ()) {
  $config: map-merge($header-default, $config);

  padding: map-get($config, padding-xs-vertical) map-get($config, padding-xs-horizontal);

  @media (min-width: $screen-sm-min) {
    padding: map-get($config, padding-xs-vertical) map-get($config, padding-sm-horizontal);
  }

  @media (min-width: $screen-md-min) {
    padding: map-get($config, padding-md-vertical) map-get($config, padding-sm-horizontal);
  }
}

@mixin header-variant($config: ()) {
  $config: map-merge($header-default, $config);

  @include header-border-bottom($config);

  background-color: map-get($config, bg);

  .header-brand {
    color: map-get($config, brand-color);

    &:hover,
    &:focus {
      color: map-get($config, brand-hover-color);
      background-color: map-get($config, brand-hover-bg);
    }
  }

  .header-link,
  .header-links > li > a,
  .header-links > li > button {
    @include header-link-color();
  }

  .header-link.current,
  .header-links > .current {
    background-color: map-get($config, current-link-bg);
  }

  .header-link.disabled,
  .header-links > .disabled > a {
    &,
    &:hover,
    &:focus {
      color: map-get($config, link-disabled-color);
      background-color: map-get($config, link-disabled-bg);
    }
  }

  .header-collapse {
    border-color: map-get($config, collapse-border);
  }

  .header-new-notification-color {
    color: map-get($config, new-notification-color);
  }

  .header-min-actions [data-toggle='collapse'][aria-expanded='true'] {
    color: map-get($config, link-color);
    background-color: map-get($config, link-hover-bg);
  }

  // Dropdown menu items
  .header-links {
    // scss-lint:disable NestingDepth

    // Remove background color from open dropdown
    .dropdown {
      &.open,
      &:hover,
      &:focus {
        background-color: map-get($config, link-hover-bg);

        a {
          color: map-get($config, link-color);
        }
      }
    }

    @media (max-width: $header-breakpoint - 1) {
      // Dropdowns get custom display when collapsed
      .open .dropdown-menu {
        // scss-lint:disable SelectorDepth

        > li > a {
          color: map-get($config, link-color);

          &:hover,
          &:focus {
            color: map-get($config, link-hover-color);
            background-color: map-get($config, link-hover-bg);
          }
        }

        > .current > a {
          &,
          &:hover,
          &:focus {
            color: map-get($config, current-link-color);
            background-color: map-get($config, current-link-bg);
          }
        }

        > .disabled > a {
          &,
          &:hover,
          &:focus {
            color: map-get($config, link-disabled-color);
            background-color: map-get($config, link-disabled-bg);
          }
        }
      }
    }
  }

  .btn-primary {
    @include button-variant(map-get($config, btn-primary));
  }
}