// --------------------------------------------
// Header Base Mixin --------------------------
// --------------------------------------------
@mixin header-base(
  $background: $header-bg,
  $height: $header-height,
  $color: $header-text-color,
  $border-color: $header-borders,
  $padding: $header-item-padding,
  $background-hover: $header-bg-hover
) {
  width: 100%;
  display: flex;
  height: $height;
  align-items: center;
  z-index: $header-z-index;
  background-color: $background;
  justify-content: space-between;
  box-shadow: inset 0 2px $color-accent;
  border-bottom: 1px solid $border-color;

  &-fixed {
    position: fixed;
    top: 0;
  }

  &-item {
    margin-top: 2px;

    &-link {
      display: flex;
      color: $color;
      padding: $padding;
      white-space: nowrap;
      align-items: center;
      height: $height - 3;

      &:hover {
        background: $background-hover;
      }
    }
  }

  &-left {
    display: flex;
    align-items: center;

    .c-header-item {
      border-right: 1px solid $border-color;
    }
  }

  &-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;

    .c-input-container {
      width: 100%;
      margin: $padding;
    }
  }

  &-right {
    display: flex;
    align-items: center;

    .c-header-item {
      border-left: 1px solid $border-color;
    }
  }
}


// --------------------------------------------
// Header Style Mixin -------------------------
// --------------------------------------------
@mixin header-style(
  $background: $header-inverse-bg,
  $color: $header-inverse-text-color,
  $border-color: $header-inverse-borders,
  $background-hover: $header-inverse-bg-hover

) {
  background-color: $background;
  border-color: $border-color;

  .c-input {
    color: $color;
    background: $background-hover;
    border-color: $border-color;

    &:hover,
    &:focus,
    &:focus-within {
      border-color: $color-accent;
      color: $header-inverse-text-color-active;
    }

    &-icon {
      color: $color;
    }
  }

  .c-header-item {
    border-color: $border-color;

    &-link {
      color: $color;

      &:hover {
        background: $background-hover;
      }
    }
  }

  .c-nav.c-nav-pills {
    .c-nav-link {
      color: $color;
      border: 1px solid transparent;

      .c-nav-icon {
        opacity: 1;
        color: $color;
      }

      // Hover styles
      &:hover:not(.c-nav-link-disabled),
      &:focus,
      &-active {
        color: $color;
        background-color: $header-inverse-pill-bg-hover;
        border: 1px solid $header-inverse-pill-borders;

        .c-nav-icon {
          opacity: 1;
          color: $header-inverse-icon-color-active;
        }
      }
    }
  }
}