.c-header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: $header-height;

  &[class*="bg-"]  {
    border-color: rgba($black, .1);
  }

  &.c-header-fixed {
    position: fixed;
    right: 0;
    left: 0;
    z-index: $zindex-fixed - 1;
  }

  .c-subheader {
    border-bottom: 0;
  }
}

.c-header-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: $header-brand-width;
  min-height: $header-height;
  transition: width $layout-transition-speed;

  &.c-header-brand-center {
    position: absolute;
    top: $header-height;
    transform: translate(-50%, -100%);

    @include ltr {
      left: 50%;
    }
    @include rtl {
      right: 50%;
    }
  }

  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-down($breakpoint) {
      &.c-header-brand-#{$breakpoint}-down-center {
        position: absolute;
        top: $header-height;
        transform: translate(-50%, -100%);
        @include ltr {
          left: 50%;
        }
        @include rtl {
          right: 50%;
        }
      }
    }
    @include media-breakpoint-up($breakpoint) {
      &.c-header-brand-#{$breakpoint}-up-center {
        position: absolute;
        top: $header-height;
        transform: translate(-50%, -100%);
        @include ltr {
          left: 50%;
        }
        @include rtl {
          right: 50%;
        }
      }
    }
  }
}

.c-header-toggler {
  min-width: 50px;
  font-size: $header-toggler-font-size;
  background-color: $header-toggler-bg;
  border: 0; // remove default button style
  @include borders($header-toggler-border);
  @include border-radius($header-toggler-border-radius);

  @include hover() {
    color: $body-color;
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
  }

  // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
  &:not(:disabled):not(.c-disabled) {
    cursor: pointer;
  }
}

.c-header-toggler-icon {
  display: block;
  height: $header-toggler-font-size * 1.25;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.c-header-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: $header-height;
  padding: 0;
  margin-bottom: 0;
  list-style: none;

  .c-header-nav-item {
    position: relative;
  }

  .c-header-nav-btn {
    background-color: transparent;
    border: $btn-border-width solid transparent;

    @include hover() {
      text-decoration: none;
    }

    &:focus,
    &.focus {
      outline: 0;
    }
  }

  .c-header-nav-link,
  .c-header-nav-btn {
    display: flex;
    align-items: center;
    padding-right: $header-nav-link-padding-x;
    padding-left: $header-nav-link-padding-x;

    .badge {
      position: absolute;
      top: 50%;
      margin-top: -16px;
      @include ltr {
        left: 50%;
        margin-left: 0;
      }
      @include rtl {
        right: 50%;
        margin-right: 0;
      }
    }

    &:hover {
      text-decoration: none;
    }
  }

  .dropdown-item {
    min-width: 180px;
  }
}

//
// Header variants
//

@include themes($header-theme-map, $create: append, $parent: ".c-header") {
  background: themes-get-value("header-bg");
  @include borders(themes-get-value("header-border"));

  .c-subheader {
    margin-top: -1px;
    border-top: themes-get-value("subheader-separator");
  }

  .c-header-brand {
    color: themes-get-value("header-brand-color");
    background-color: themes-get-value("header-brand-bg");
    @include borders(themes-get-value("header-brand-border"));

    @include hover-focus {
      color: themes-get-value("header-brand-hover-color");
    }
  }

  .c-header-nav {
    .c-header-nav-link,
    .c-header-nav-btn {
      color: themes-get-value("header-color");

      @include hover-focus {
        color: themes-get-value("header-hover-color");
      }

      &.c-disabled {
        color: themes-get-value("header-disabled-color");
      }
    }

    .c-show > .c-header-nav-link,
    .c-active > .c-header-nav-link,
    .c-header-nav-link.c-show,
    .c-header-nav-link.c-active {
      color: themes-get-value("header-active-color");
    }
  }

  .c-header-toggler {
    color: themes-get-value("header-color");
    border-color: themes-get-value("header-toggler-border-color");
  }

  .c-header-toggler-icon {
    background-image: themes-get-value("header-toggler-icon-bg");

    &:hover {
      background-image: themes-get-value("header-toggler-hover-icon-bg");
    }
  }

  .c-header-text {
    color: themes-get-value("header-color");
    a {
      color: themes-get-value("header-active-color");

      @include hover-focus {
        color: themes-get-value("header-active-color");
      }
    }
  }
}