// Site/App Header
//================================================== //

// Variables for this file
$header-height: 60px;
$subheader-height: 60px;

// Top Header
.header {
  background-color: $header-bg-color;
  border-bottom: 1px solid $header-bottom-border-color;
  display: block;
  height: $header-height;
  width: 100%;

  /* stylelint-disable-next-line selector-type-no-unknown */
  ids-breadcrumb {
    margin: 0 8px;
    width: calc(100% - 16px);
    position: relative;
    top: 12px;
    display: inline-flex;
  }

  &.scrollable {
    overflow: auto;
  }

  .toolbar [class^='btn'] {
    &.is-open {
      .icon {
        color: $ids-color-palette-white;
        opacity: 1;
      }
    }
  }

  .searchfield {
    background-color: transparent;
    border: 1px solid transparent;

    &.has-focus {
      box-shadow: none;
    }
  }

  .row {
    max-width: 100% !important;
    width: 100%;
  }

  > * {
    vertical-align: middle;
  }

  h1 {
    @include transition(transform 150ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

    color: $header-text-color;
    display: inline;
    font-size: $ids-size-font-lg;
    font-weight: $ids-number-font-weight-base;
    margin-bottom: 0;
    text-overflow: ellipsis;
    vertical-align: middle;

    span {
      height: inherit;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // Used for the popupmenu header pattern
  [class^='btn'] {
    > h1 {
      width: auto;
    }

    .icon.icon-dropdown {
      margin-left: 5px;
    }

    &.btn-menu .icon.icon-dropdown {
      margin-top: 1px;
    }
  }

  .btn-primary:not([disabled]) {
    border: 1px solid $header-primary-btn-background-color;

    &:hover,
    &:focus {
      background-color: $header-primary-btn-background-hover-color;
      border: 1px solid $header-primary-btn-background-hover-color;
    }

    &:focus:not(.hide-focus) {
      box-shadow: 0 0 0 2px $ids-color-brand-primary-alt, 0 0 0 3px $ids-color-palette-white, $header-focus-box-shadow;

      &:active {
        box-shadow: none;
      }
    }
  }

  .page-title {
    color: $header-text-color;
    font-size: $ids-size-font-lg;
    margin-top: 3px;

    .alert .icon {
      line-height: inherit;
      margin-left: 7px;
      position: absolute;
      top: -3px;
    }
  }

  .section-title {
    color: $header-text-color;
    font-size: $ids-size-font-base !important;
    margin-top: 2px;
    padding: 0;
    text-transform: capitalize;
  }

  .separator {
    @include font-size(22);

    color: $header-text-color;
    padding: 0 4px 0 5px;
    position: relative;
    top: 1px;
  }

  .tooltip-description {
    color: $header-text-color;
  }

  .header-search {
    margin-left: -3px;
  }

  .header-right {
    float: right;
    position: relative;
    top: -7px;
  }

  .toolbar {
    height: $header-height;
    padding: 0 1rem;
    width: 100%;

    &.searchfield-active {
      .toolbar-searchfield-wrapper.active {
        .searchfield {
          @media (max-width: ($breakpoint-phone-to-tablet - 1)) {
            color: $header-flex-toolbar-input-searchfield-color;
          }
        }

        .icon:not(.close) {
          @media (max-width: ($breakpoint-phone-to-tablet - 1)) {
            color: $searchfield-header-icon-color !important;
          }
        }
      }
    }

    .title {
      color: $header-text-color;
      height: $header-height;
      left: 8px;
      overflow: hidden;
      position: absolute;
      text-overflow: clip;

      button + span {
        position: relative;
        top: 2px;
      }

      h1,
      h2 {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;

        + [class^='btn'] {
          margin-left: 5px;
        }

        span {
          display: block;
        }
      }

      h2 {
        font-size: 1.8rem;
        margin-inline-start: 8px;
      }

      [class^='btn'] + h1,
      [class^='btn'] + h2 {
        margin: 3px;
        max-width: calc(100% - 40px);
      }

      .btn-menu {
        text-transform: none;
      }

      .btn-icon {
        border-radius: 8px;
        top: 3px;
      }
    }

    &.has-title-button + .breadcrumb {
      padding-left: 50px;
    }

    .panel-title {
      @include font-size(20);

      line-height: 1.2;
    }

    .panel-subhead {
      font-size: $ids-size-font-base;
      line-height: 1;
    }

    &.do-resize {
      .title {
        left: 8px;
      }

      &.has-more-button {
        .title {
          left: 8px;
          top: 0;
        }
      }
    }

    .application-menu-trigger,
    .list-detail-back-button,
    .back-button,
    .go-back {
      svg.icon {
        height: 18px;
        top: 1px;
        width: 18px;
      }
    }

    .buttonset {
      .searchfield-wrapper.non-collapsible.toolbar-searchfield-wrapper.has-categories.has-go-button.has-close-icon-button.is-open {
        button.searchfield-category-button {
          border: 1px solid $searchfield-toolbar-border-color;
          border-right: transparent;
          border-radius: 8px 0 0 8px;
          background-color: $ids-color-palette-white;
          color: $searchfield-header-buttons;

          svg.icon {
            color: $searchfield-header-buttons !important;
          }

          svg.icon-dropdown {
            position: relative;
            left: -3px;
            top: unset;
          }

          &:hover {
            background-color: $ids-color-palette-white !important;
          }
        }

        button.btn-icon.close {
          svg.close.icon {
            top: 8px !important;
          }
        }

        button.go-button {
          background-color: $ids-color-palette-white;
          color: $searchfield-header-buttons;

          &:hover {
            background-color: $ids-color-palette-white !important;
          }

          &:focus {
            box-shadow: none !important;
          }

          &:active {
            border-left: none;
          }

          &::after {
            border-right: none;
          }
        }

        input.searchfield {
          border: 1px solid $searchfield-toolbar-border-color;
        }

        button.go-button {
          border: 1px solid $searchfield-toolbar-border-color;
          right: 1px;
          transition: border;
          transition-delay: 100ms;
        }

        &:hover {
          button.searchfield-category-button {
            border: 1px solid $searchfield-header-hover-icon-color;
            border-right: transparent;
          }

          input.searchfield {
            border: 1px solid $searchfield-header-hover-icon-color !important;
          }

          button.go-button {
            border: 1px solid $searchfield-header-hover-icon-color;
            transition: border;
            transition-delay: 50ms;
          }
        }
      }
    }

    .buttonset .toolbar-searchfield-wrapper {
      .btn-icon {
        &.close {
          top: 50%;
          transform: translateY(-50%);

          .icon.close {
            color: $searchfield-header-icon-color;
            opacity: unset;
            top: 7px;
          }
        }
      }
    }
  }

  .flex-toolbar {
    height: inherit;
    max-height: $header-height;
    padding: 0 1.3rem;
    width: 100%;

    &.has-title-button + .breadcrumb {
      padding-left: 56px;
    }

    .toolbar-section.search-categories {
      .toolbar-searchfield-wrapper.has-categories .btn.searchfield-category-button {
        svg.icon {
          color: $subheader-searchfield-category-button-font-color !important;
          transform: translateY(0);
        }
      }
    }

    .search-categories .has-categories.non-collapsible {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

      .searchfield-category-button {
        border: 1px solid $header-searchfield-input-border-color;
        border-radius: 0;

        &:focus:not(.hide-focus),
        &.is-open {
          .icon {
            color: $searchfield-header-icon-color;
          }
        }
      }

      .collapse-button:focus .icon {
        color: $searchfield-header-icon-color;
      }
    }

    .toolbar-searchfield-wrapper {
      &.is-open {
        .searchfield {
          border-color: $header-searchfield-input-border-color;
        }
      }

      &.non-collapsible.has-close-icon-button {
        .btn-icon.close {
          .icon.close {
            top: 7px;
          }
        }
      }
    }
  }

  &.has-alternate-breadcrumb {
    .flex-toolbar {
      margin-bottom: 5px;
    }
  }

  &.has-popupmenu-title {
    .flex-toolbar {
      .title {
        padding: 3px;
      }
    }
  }

  // Header Tabs
  // See "/sass/controls/_tabs.scss" for the basic tab styles
  // See "/sass/controls/_headertabs.scss" for overrides specific to header tabs

  // Wizard
  // See "/sass/controls/_wizard.scss" for the header-based styles

  // Sticky Header
  &.is-sticky {
    z-index: 9000;
  }

  h1,
  h2,
  h3,
  .toolbar-section.title {
    color: $header-text-color;
  }

  .go-button {
    background-color: $header-primary-btn-background-color;
    border-color: $header-primary-btn-background-color;
    color: $header-text-color;

    &:hover,
    &:active,
    &:focus,
    &:focus:active {
      background-color: $header-primary-btn-background-hover-color;
      border-color: $header-primary-btn-background-hover-color;
    }
  }

  .toolbar-section.search {
    .searchfield-wrapper.toolbar-searchfield-wrapper:not(.has-collapse-button) {
      width: 100%;
    }
  }

  .buttonset .toolbar-searchfield-wrapper:not(.is-open) {
    &.non-collapsible {
      svg.icon:not(.close) {
        color: $searchfield-header-icon-color;
      }
    }

    svg.icon:not(.close) {
      color: $header-toolbar-searchfield-icon-color;
      opacity: 1;
    }
  }
}

.header,
.masthead {
  &.is-personalizable {
    .toolbar-searchfield-wrapper:not(.is-open) {
      svg.icon:not(.close) {
        color: $header-toolbar-searchfield-icon-color;
        opacity: 0.8;
      }

      &.is-hovered {
        .icon:not(.close) {
          opacity: 1;
        }
      }
    }

    .flex-toolbar {
      .title button {
        vertical-align: middle;
      }

      .has-collapse-button {
        .collapse-button {
            border-radius: 8px;
            position: absolute;
            right: 0;
          }
      }
    }
  }
}

// Application Subheaders
.subheader {
  @include transition(background-color 500ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

  background-color: $subhead-bg-color;
  display: block;
  height: $subheader-height;
  overflow: hidden;
  width: 100%;

  .searchfield-wrapper {
    height: inherit;
    margin-bottom: 0;

    &.has-focus {
      box-shadow: none;
    }

    .go-button {
      height: 38px;
    }
  }

  .toolbar {
    height: $header-height;
    padding: 0 1rem;
  }

  .go-button {
    background-color: $header-primary-btn-background-color;
    border-color: $header-primary-btn-background-color;
    color: $searchfield-go-text-color;

    &:hover,
    &:active,
    &:focus,
    &:focus:active {
      background-color: $header-primary-btn-background-hover-color;
      border-color: $header-primary-btn-background-hover-color;
      color: $searchfield-go-text-color;
    }

    &:not(.hide-focus) {
      box-shadow: 0 0 0 1px $body-color-primary-background, 0 0 0 2px $button-color-secondary-focus-border, $focus-box-shadow;
    }
  }

  .toolbar [class^='btn'] {
    &:hover {
      background-color: $button-color-tertiary-hover-background-new !important;

      .icon {
        color: $ids-color-palette-white;
      }
    }

    &.is-open {
      .icon {
        color: $ids-color-palette-white;
        opacity: 1;
      }
    }
  }

  .full-searchfield-container {
    .searchfield-wrapper.context.has-focus {
      .searchfield,
      .btn {
        border-color: $header-searchfield-input-border-color;
      }
    }

    .searchfield-wrapper .btn.is-open {
      color: $header-searchfield-btn-font-color;

      .icon {
        color: $header-searchfield-btn-font-color;
      }
    }

    .searchfield-wrapper.has-focus {
      .btn {
        &:focus,
        &:active {
          color: $header-searchfield-btn-font-color;

          .icon {
            color: $header-searchfield-btn-font-color;
          }
        }
      }
    }
  }

  .searchfield-wrapper.context.non-collapsible {
    &.has-go-button {
      .btn-icon.close {
        right: 50px;
        width: 34px;
      }
    }
  }
}

.header,
.subheader,
.personalize-subheader {
  .toolbar,
  .flex-toolbar {
    .buttonset {
      > .separator {
        background-color: $header-button-color;
        padding: 0;
      }

      [class^='btn']:not(.searchfield-category-button):not(.btn-actions):not(.close) {
        margin-right: 3px;
        min-width: 32px;
        text-overflow: ellipsis;
        flex-shrink: 1;
      }
    }

    // Buttons in the header will all appear as Tertiary/Destructive-style
    [class^='btn']:not(.btn-primary) {
      background-color: transparent;
      border: 1px solid transparent;
      border-radius: 8px;

      &:not(.close) {
        color: $header-button-color;
      }

      &:not([disabled]) {
        cursor: pointer;
      }

      &:not(.close) svg.icon {
        color: $header-button-color;
      }

      &.application-menu-trigger {
        top: 2px;

        &:not(:focus) .icon {
          color: $header-button-color;
        }
      }

      &.is-open .icon,
      &.btn-menu.is-open .icon {
        color: $button-color-tertiary-hover-background-new;
      }

      .audible {
        color: $header-text-color;
      }

      &:active:not([disabled]),
      &[aria-expanded='true'] {
        color: $button-color-tertiary-hover-background-new;

        .icon {
          color: $header-button-focus-color;
        }
      }

      &:focus {
        color: $header-button-focus-color;

        .icon {
          color: $header-button-focus-color;
        }
      }

      &:focus:not(.hide-focus) {
        color: $header-button-focus-color;

        &.collapse-button {
          border-color: $header-button-focus-border-color;
        }

        &:not(.collapse-button) {
          border-color: $ids-color-palette-white;
          box-shadow: $button-color-tertiary-focus-shadow;
        }
      }

      &.is-selected {
        &:focus:not(.hide-focus) {
          color: $header-button-focus-color;
        }
      }

      &.is-pressed {
        color: $header-button-focus-color;

        .icon {
          color: $header-button-focus-color;
        }
      }

      &[disabled] {
        color: $header-button-disabled-color !important;
        background-color: transparent;
        border: 1px solid transparent;

        .icon {
          color: $header-button-disabled-color !important;
        }

        &:hover {
          background-color: transparent;
          border-color: transparent;
        }
      }

      .ripple-effect {
        background-color: $header-text-color;
      }
    }

    .toolbar-section {
      &.search-categories {
        &.search {
          @media (max-width: $breakpoint-phone-to-tablet) {
            width: 50%;
          }

          .btn.searchfield-category-button {
            color: $header-searchfield-btn-font-color;
            height: 38px;
            padding-right: 20px;

            @media (min-width: $breakpoint-phone-to-tablet) {
              padding-right: 10px;
            }
          }

          .has-close-icon-button {
            .btn-icon {
              height: auto;
              right: 40px;
              top: 50%;
              transform: translateY(-50%);

              @media (min-width: $breakpoint-phone-to-tablet) {
                right: 7px;
              }

              .icon.close {
                margin-top: 0;
                top: 0;
                transform: translateY(0);
              }

              &:hover {
                .icon.close {
                  color: $searchfield-header-hover-icon-color;
                }
              }
            }
          }
        }

        .searchfield-wrapper.has-categories,
        .toolbar-searchfield-wrapper {
          width: 100%;

          &.is-open .collapse-button {
            border-bottom: 0;
            border-right: 0;
            border-top: 0;
          }
        }
      }

      &.flex-end {
        justify-content: flex-end;
      }

      &.flex-grow-1 {
        flex-grow: 1;
      }

      &.flex-grow-2 {
        flex-grow: 2;
      }
    }
  }

  .full-searchfield-container {
    margin: 0 auto;
    max-width: $breakpoint-tablet-to-desktop;
    padding: 1.1rem 2rem 0;
    vertical-align: middle;

    @media (max-width: $breakpoint-slim) {
      padding: 1.1rem 0.5rem 0;
    }

    @media (min-width: $breakpoint-phone-to-tablet) {
      padding: 1.1rem 4rem 0;
    }

    .hyperlink {
      color: $header-full-searchfield-hyperlink-color;
      float: right;
      font-size: $ids-size-font-base;

      &:hover {
        color: $header-full-searchfield-hyperlink-color;
      }

      &:focus:not(.hide-focus)::after,
      &:active::after {
        border-color: $ids-color-palette-white;
      }
    }
  }

  [class^='btn'] {
    .icon.app-header {
      > span {
        background-color: $header-button-color;
      }
    }

    &:focus,
    &:hover {
      .icon.app-header {
        > span {
          background-color: $button-color-tertiary-hover-background-new;
        }
      }
    }
  }

  .btn-icon:hover {
    span:not(.icon) {
      color: $header-text-color;
    }
  }

  .btn-menu:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-tertiary) {
    color: $header-button-color;

    .icon {
      color: $header-button-color;
    }

    &:hover .icon {
      color: $header-button-color;
    }

    &:focus:not(.hide-focus) {
      color: $header-button-focus-color;
    }

    .ripple-effect {
      background-color: $header-button-color;
    }
  }

  .breadcrumb {
    display: block;
    padding: 1px 20px 0;

    ol {
      padding: 0;
    }

    .breadcrumb-list li.current .hyperlink,
    .hyperlink {
      color: $header-breadcrumb-color;

      &:active:not([disabled]),
      &:hover:not([disabled]),
      &:focus:not([disabled]) {
        color: $header-breadcrumb-color;
      }

      &:focus:not([disabled]):not(.hide-focus) {
        outline: 1px solid $header-breadcrumb-color;
      }

      &:hover:not([disabled]) {
        border-bottom: 1px solid $header-breadcrumb-color;
      }
    }

    li {
      color: $header-breadcrumb-color;

      &::after {
        color: $header-breadcrumb-color;
      }
    }

    &.alternate {
      background-color: $header-breadcrumb-alt-bg-color;
      border-bottom: 1px solid $header-breadcrumb-alt-color;

      ol {
        padding: 15px 0;
      }

      .hyperlink {
        color: $header-breadcrumb-alt-color;

        &:active:not([disabled]),
        &:hover:not([disabled]),
        &:focus:not([disabled]) {
          color: $header-breadcrumb-alt-color;
        }

        &:focus:not([disabled]):not(.hide-focus) {
          outline: 1px solid $header-breadcrumb-alt-color;
        }

        &:hover:not([disabled]) {
          border-bottom: 1px solid $header-breadcrumb-alt-color;
        }
      }

      li {
        color: $header-breadcrumb-alt-color;

        &::after {
          color: $header-breadcrumb-alt-color;
        }
      }
    }
  }
}

.subheader,
.personalize-subheader {
  h1,
  h2,
  h3 {
    display: inline-block;
    margin: 16px 15px;
    color: $header-text-color;
  }

  h2,
  h3 {
    font-size: 2rem;
  }
}

// Title Button Styles for these three elements
.header,
.subheader,
.personalize-subheader,
.masthead {
  .toolbar {
    [class^='btn'] {
      .app-header,
      .app-drawer {
        &.icon {
          > span {
            background-color: $header-button-color;
          }
        }
      }

      &:hover:not([disabled]),
      &:active:not([disabled]) {
        .app-drawer,
        .app-header {
          &.icon {
            > span {
              background-color: $button-color-tertiary-hover-background-new;
            }
          }
        }
      }

      &:focus {
        .app-drawer,
        .app-header {
          &.icon {
            > span {
              background-color: $header-button-focus-color;
            }
          }
        }
      }
    }
  }
}

.is-firefox {
  .header {
    h1 {
      margin-top: 3px;
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .header {
    .toolbar {
      .title {
        left: auto;
        right: 8px;
      }

      &.do-resize {
        .title {
          left: auto;
          right: 8px;
        }
      }
    }

    .flex-toolbar {
      .toolbar-section.search-categories.search {
        .btn.searchfield-category-button {
          padding-inline-end: 20px;
          padding-right: 10px;

          @media (min-width: $breakpoint-phone-to-tablet) {
            padding-inline-end: 10px;
          }
        }

        .toolbar-searchfield-wrapper {
          .searchfield {
            height: 38px;
            border-left: 1px solid $header-searchfield-input-border-color;
            border-right-style: none;

            @media (min-width: $breakpoint-phone-to-tablet) {
              height: 38px;
            }
          }
        }

        .collapse-button {
          height: 38px;
          border-radius: 8px;

          @media (min-width: $breakpoint-phone-to-tablet) {
            height: 34px;
          }
        }

        .has-close-icon-button {
          .btn-icon {
            right: calc(100% - 60px);

            @media (min-width: $breakpoint-phone-to-tablet) {
              right: calc(100% - 30px);
            }
          }
        }
      }
    }
  }
}

// Print Style Sheet
@media print {
  body {
    background-color: transparent !important;
    width: 100%;
  }

  header.header,
  .masthead {
    background-color: transparent !important;
  }

  header.header .title,
  header.header h1 {
    color: $ids-color-palette-slate-70 !important;
  }

  svg {
    color: $ids-color-palette-slate-70 !important;
  }
}

.header .flex-toolbar [class^="btn"]:not(.btn-primary):not(.hide-focus):focus {
  border: 1px solid $ids-color-brand-primary-base;
  padding: 0 6px;

  &:focus {
    border: 1px solid $header-button-focus-border-color !important;
  }
}

html[class*='theme-classic-'][class*='theme-classic-'] {
  .header .toolbar-searchfield-wrapper {
    .btn-icon.close svg.close.icon {
      color: $trigger-icon-fill-color;
    }
  }

  .header .flex-toolbar [class^='btn']:not(.btn-primary):not(.close):hover svg.icon {
    color: $button-color-tertiary-hover-text;
  }

  .flex-toolbar:not(.editor-toolbar):not(.formatter-toolbar):not(.contextual-toolbar) {
    .toolbar-section [class^='btn']:not(:disabled):not(.searchfield-category-button):not(.btn-primary) {
      &:not(.collapse-button):not(.close):hover {
        background-color: $toolbar-btn-actions-hover-bg-color;
        color: $ids-color-palette-slate-100;
      }
    }
  }
}