@mixin cwui-global-header {
  .global-header {
    @include breakpoint(xlarge) {
      margin-bottom: rem-calc(10);
    }

    @media screen and (max-width: #{$task-nav-breakpoint}) {
      border-top: 4px solid #e7e2d9;
    }
  }

  .global-header-inner {
    @include grid-row();
    background: #fff;
    padding: rem-calc(15);
    position: relative;

    @include breakpoint(xlarge) {
      padding-left: rem-calc(30);
      padding-right: rem-calc(30);
    }

    @media screen and (max-width: #{$task-nav-breakpoint}) {
      display: flex;
    }

    .row {
      @include grid-row($behavior: nest);
    }
  }

  .task-nav-wrap {
    background: #e7e2d9;
    // overflow: hidden;
    left: 0;
    padding: 0 ($grid-column-gutter / 2);
    // right: ;
    position: absolute;
    top: -5px;
    transform: translateY(-500px);
    transition: transform .3s ease;
    width: 100%;
    z-index: 99;

    @media screen and (min-width: #{$task-nav-breakpoint}) {
      background-color: transparent;
      border: 0;
      // margin-top: rem-calc(10);
      // padding-right: $grid-column-gutter / 2;
      position: absolute;
      // right: 0;
      right: rem-calc(15);
      top: rem-calc(10);
      transform: translateY(0);
      transition: none;
      width: initial;
      z-index: inherit;
    }

    // > nav {
      // @include clearfix;
      // padding: 0 ($grid-column-gutter / 2);
    // }

    .is-dropdown-submenu {
      border: 0;
      min-width: 100px;
    }
  }

  .task-nav-wrap.expanded,
  .task-nav-wrap:target {
    // box-shadow: 0px 1px 10px rgba(0, 0, 0, .5);
    // height: rem-calc(200);
    transform: translateY(0);

    ~ .task-nav-toggle--open {
      display: none;
    }

    ~ .task-nav-toggle--close {
      display: block;
    }
  }

  .task-nav-toggle {
    border-radius: rem-calc(0 0 3 3);
    border-top: 0;
    color: #020202;
    // clear: both;
    display: block;
    // float: right;
    // margin-right: rem-calc(20);
    padding: rem-calc(5);
    position: absolute;
    right: rem-calc(15);
    text-align: center;
    // top: -1px;
    width: rem-calc(44);

    @media screen and (min-width: #{$task-nav-breakpoint}) {
      display: none !important;
    }

    &--open,
    &--close {
      background-color: #e7e2d9;
      height: rem-calc(35);
    }

    &--open {
      top: 0;
    }

    &--close {
      // display: none;
      // position: absolute;
      bottom: -(rem-calc(35));
      z-index: 100;
    }

    .icon--menu {
      height: 14px;
      width: 22px;
    }

    .icon--close {
      height: 14px;
      width: 14px;
    }
  }

  .dropdown.task-nav__menu {
    margin: 0;
    position: relative;
    // z-index: 3; // Need this anymore?

    @supports (display: grid) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    @media screen and (min-width: #{$task-nav-breakpoint}) {
      display: flex;
      float: right;
      line-height: 1;
    }

    a {
      border-top: 1px solid #b3afa4;
      color: #000;
      display: block;
      text-decoration: none;
      text-transform: uppercase;

      &:hover {
        color: #8b3003;
      }
    }

    li {
      float: left;
      font-size: rem-calc(12);
      // list-style: none;
      padding: rem-calc(0 0 2);
      width: 49%;

      @include breakpoint(medium) {
        padding-left: rem-calc(8);
        padding-right: rem-calc(8);
        width: 32%;
      }

      @media screen and (min-width: #{$task-nav-breakpoint}) {
        width: inherit;
      }

      @supports (display: grid) {
        width: auto;
      }
    }

    > li > a {
      background: transparent;
      padding: rem-calc(10) 0;
    }

    .submenu li {
      padding: rem-calc(5);
    }

    .submenu a {
      text-transform: none;
    }
  }


  .searchbox {
    // padding: 0 ($grid-column-gutter / 2);
    @media screen and (min-width: #{$task-nav-breakpoint}) {
      clear: both;
      float: right;
      margin-top: rem-calc(15);
    }

    form {
      position: relative;
    }

    input[type="text"] {
      border-color: #c6c3ba;
      box-shadow: none;
      color: #6d695e;
      height: rem-calc(30);
      padding-right: rem-calc(25);
      width: 100%;

      @media screen and (min-width: #{$task-nav-breakpoint}) {
        transition: width .3s ease-in-out;
        width: rem-calc(170);

        &:focus {
          width: rem-calc(300);
        }
      }

    }

    input[type="submit"] {
      background: transparent url('#{$www-assets}/images/icons/icon-search-gray.png') no-repeat center 2px;
      background-image: url('#{$www-assets}/images/icons/icon-search-gray.svg'), none;
      background-size: contain;
      border: 0;
      cursor: pointer;
      height: rem-calc(18);
      position: absolute;
      right: rem-calc(4);
      text-indent: -9999em;
      top: rem-calc(4);
      width: rem-calc(22);
    }
  }


  .csuc-signature {
    // background: url('#{$www-assets}/images/csuc-signature.png') 0 0 no-repeat;
    // background-image: url('#{$www-assets}/images/csuc-signature.svg'), none;
    // background-size: contain;
    // height: rem-calc(35);
    // width: rem-calc(207);

    .global-header & {
      max-width: 80%;
    }

    @media screen and (min-width: 22.5em) { // 360px
      // height: rem-calc(43);
      // width: rem-calc(250);
    }

    @include breakpoint(medium) {
      // height: rem-calc(55);
      // width: rem-calc(324);
    }

    .global-header &,
    .site-header & {
      display: inline-block;
      // margin: rem-calc(35 0 20 0);
      position: relative;
      z-index: 1;

      @media screen and (min-width: 20.625em) { // 330px
        // margin-top: rem-calc(20);
      }

      @include breakpoint(xlarge) {
        // margin-left: rem-calc(30);
      }
    }
  }


  @media screen and (min-width: #{$task-nav-breakpoint}) {
    .dropdown.task-nav__menu {
      > li > a,
      .is-dropdown-submenu a {
        border: 0;
        padding: 0;
      }

      li {
        font-size: rem-calc(12);
        // width: inherit;

        &:nth-child(7) {
          padding-right: rem-calc(8);
        }
      }

      > li {
        border-right: 1px solid #000;
      }

      > li:last-child {
        border: 0;
        padding-right: 0;
      }
    }

    .tn-hide--large-up {
      display: none !important;
    }

    .tn-show--large-up {
      display: inherit;
    }
  }

  @media screen and (max-width: #{$task-nav-breakpoint}) {
    .tn-show--large-up {
      display: none !important;
    }
  }
}