// studio - elements - global header
// ====================

.wrapper-header {
  position: relative;
  width: 100%;
  box-shadow: 0 1px 2px 0 $shadow-l1;
  margin: 0;
  padding: 0 $baseline;
  background: $white;

  header.primary {
    @include clearfix();
    @include grid-container();
    @include float(none);

    box-sizing: border-box;
    max-width: $fg-max-width;
    min-width: $fg-min-width;
    margin: 0 auto;
  }

  // ====================

  // basic layout
  .wrapper-l, .wrapper-r {
    background: $white;
  }

  .wrapper-l {
    @include span(7);
  }

  .wrapper-r {
    @include span(4, before);
    @include text-align(right);
  }

  .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
  }

  .user-language-selector {
    width: 120px;
    display: inline-block;
    margin: 0 10px 0 5px;
    vertical-align: sub;

    .language-selector {
      width: 120px;
    }
  }

  .nav-account {
    width: auto;
  }

  // basic layout - nav items
  .nav-dd {
    .nav-item {
      display: inline-block;
      vertical-align: middle;

      &:last-child {
        margin-right: 0;
      }

      .title{
        @extend %ui-btn-dd-nav-primary;

        @include transition(all $tmg-f2 ease-in-out 0s);

        line-height: 16px;
        margin-top: 6px;
        font-size: font-size(base);
        font-weight: font-weight(semi-bold);

        .nav-sub .nav-item {
          .icon {
            display: inline-block;
            vertical-align: middle;
            margin-right: ($baseline/4);
          }
        }
      }
    }

    .nav-item a {
      color: $gray-d1;

      &:hover,
      &:focus {
        color: $blue-s1;
      }
    }
  }

  // ====================

  // specific elements - branding
  .branding {
    padding: ($baseline*0.75) 0;

    .brand-link {
      display: block;

      .brand-image {
        max-height: ($baseline*2);
        display: block;
      }
    }
  }

  // ====================

  // specific elements - account-based nav
  .nav-account {
    position: relative;
    padding: ($baseline*0.75) 0;

    .nav-sub {
      @include text-align(left);
    }

    .nav-account-help {
      .wrapper-nav-sub {
        width: ($baseline*10);
      }
    }

    .nav-account-user {
      .title {
        max-width: ($baseline*10.5);
        display: inline-block;
        max-width: 84%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .settings-language-form {
      margin-top: 4px;

      .language-selector {
        width: 130px;
      }
    }
  }
}
// ====================

// CASE: user signed in
.is-signedin {
  .wrapper-l {
    width: flex-grid(8, 12);
  }

  .wrapper-r {
    width: flex-grid(4, 12);
  }

  .branding {
    @include margin-right(2%);
  }

  .nav-account {
    top: ($baseline/4);
  }
}