@import "../../base";

@include govuk-exports("idsk/component/header") {

  $idsk-header-background: #131313;
  $idsk-header-border-color: $idsk-brand-colour;
  $idsk-header-border-width: govuk-spacing(2);
  $idsk-header-text: govuk-colour("white");
  $idsk-header-link: govuk-colour("white");
  $idsk-header-link-hover: govuk-colour("white");
  $idsk-header-link-active: #1d8feb;
  $idsk-header-nav-item-border-color: #2e3133;

  $idsk-header-logo-width: 186px !default;
  $idsk-header-logo-height: 30px !default;

  .idsk-header {
    @include govuk-font($size: 16);

    color: $idsk-header-text;
    background: $idsk-header-background;

    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 3px;
      background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(33.3%, #ffffff), color-stop(33.3%, #003183), color-stop(66.6%, #003183), color-stop(66.6%, #d0190f), to(#d0190f));
      background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 33.3%, #003183 33.3%, #003183 66.6%, #d0190f 66.6%, #d0190f 100%);
      background-image: linear-gradient(to right, #ffffff 0%, #ffffff 33.3%, #003183 33.3%, #003183 66.6%, #d0190f 66.6%, #d0190f 100%);
    /* equivalent to (to right, white, white 50%, black 50%, black) */
      background-size: 150px 100%;
      background-repeat: repeat;
    }
  }

  .idsk-header__container--full-width {
    padding: 0 govuk-spacing(3);
    border-color: $idsk-header-border-color;

    .idsk-header__menu-button {
      right: govuk-spacing(3);
    }
  }

  .idsk-header__container {
    @include govuk-clearfix;
    position: relative;
    padding-top: govuk-spacing(4);
    padding-bottom: govuk-spacing(2);
  }

  .idsk-header__logotype {
    display: inline-block;
    margin-right: govuk-spacing(1);

    & > * {
      width: $idsk-header-logo-width;
      height: $idsk-header-logo-height;
    }
  }

  .idsk-header__product-name {
    @include govuk-font($size: 24, $line-height: 1);
    display: inline-table;
    padding-right: govuk-spacing(2);
  }

  .idsk-header__link {
    text-decoration: none;

    &:link,
    &:visited {
      color: $idsk-header-link;
    }

    &:hover {
      text-decoration: underline;
    }

    &:focus {
      @include govuk-focused-text;
    }

    // alphagov/govuk_template includes a specific a:link:focus selector
    // designed to make unvisited links a slightly darker blue when focussed, so
    // we need to override the text colour for that combination of selectors.
    @include govuk-compatibility(govuk_template) {
      &:link:focus {
        @include govuk-text-colour;
      }
    }
  }

  .idsk-header__link--homepage {
    // Font size needs to be set on the link so that the box sizing is correct
    // in Firefox
    @include govuk-font($size: false, $weight: bold);

    display: inline-block;
    font-size: 30px; // We don't have a mixin that produces 30px font size
    line-height: 1;

    &:link,
    &:visited {
      text-decoration: none;
    }

    &:hover,
    &:active {
      // Negate the added border
      margin-bottom: -1px;
      // Omitting colour will use default value of currentColor – if we
      // specified currentColor explicitly IE8 would ignore this rule.
      border-bottom: 1px solid;
    }

    // Remove any borders that show when focused and hovered.
    &:focus {
      margin-bottom: 0;
      border-bottom: 0;
    }
  }

  .idsk-header__link--service-name {
    display: inline-block;
    margin-bottom: govuk-spacing(2);
    @include govuk-font($size: 24, $weight: bold);
  }

  .idsk-header__logo,
  .idsk-header__content {
    box-sizing: border-box;
  }

  .idsk-header__logo {
    @include govuk-responsive-margin(2, "bottom");
    padding-right: govuk-spacing(8);

    @include mq ($from: desktop) {
      width: 33.33%;
      padding-right: $govuk-gutter-half;
      float: left;
      vertical-align: top;
    }
  }

  .govuk-header__container--with-user .idsk-header__logo {
    @include mq ($from: desktop) {
      width: 25%;
    }
  }

  .idsk-header__content {
    @include mq ($from: desktop) {
      width: 66.66%;
      padding-left: $govuk-gutter-half;
      float: left;
    }
  }
  .govuk-header__container--with-user .idsk-header__content {
    @include mq ($from: desktop) {
      width: 50%;
    }
  }

  .idsk-header__menu-button {
    @include govuk-font($size: 16);
    display: none;
    position: absolute;
    top: govuk-spacing(4);
    right: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    color: $idsk-header-link;
    background: none;

    &:hover {
      text-decoration: underline;
    }

    &:focus {
      @include govuk-focused-text;
    }

    &::after {
      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
      content: "";
      margin-left: govuk-spacing(1);
    }

    @include mq ($from: tablet) {
      top: govuk-spacing(3);
    }
  }

  .idsk-header__menu-button--open {
    &::after {
      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
    }
  }

  .idsk-header__navigation {
    @include govuk-responsive-margin(2, "bottom");
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .js-enabled {
    .idsk-header__menu-button {
      display: block;
      @include mq ($from: desktop) {
        display: none;
      }
    }

    .idsk-header__navigation {
      display: none;
      @include mq ($from: desktop) {
        display: block;
      }
    }

    .idsk-header__navigation--open {
      display: block;
    }
  }


  .idsk-header__navigation--end {
    @include mq ($from: desktop) {
      margin: 0;
      padding: govuk-spacing(1) 0;
      text-align: right;
    }
  }

  .idsk-header__navigation--no-service-name {
    padding-top: govuk-spacing(7);
  }

  .idsk-header__navigation-item {
    padding: govuk-spacing(2) 0;
    border-bottom: 1px solid $idsk-header-nav-item-border-color;

    @include mq ($from: desktop) {
      display: inline-block;
      margin-right: govuk-spacing(3);
      padding: govuk-spacing(1) 0;
      border: 0;
    }

    a {
      @include govuk-font($size: 16, $weight: bold);
      white-space: nowrap;
    }
  }

  .idsk-header__navigation-item--active {
    a {
      &:link,
      &:hover,
      &:visited {
        color: $idsk-header-link-active;
      }

      // When focussed, the text colour needs to be darker to ensure that colour
      // contrast is still acceptable
      &:focus {
        color: $govuk-focus-text-colour;
      }
    }
  }

  .idsk-header__navigation-item:last-child {
    margin-right: 0;
  }

  .idsk-header__user {
    text-align: right;
    @include mq ($from: desktop) {
      width: 25%;
    }
  }

  .idsk-header__user--end {
    @include mq ($from: desktop) {
      margin: 0;
      padding: govuk-spacing(1) 0;
      text-align: right;
    }
  }

  .idsk-header__user-icon {
      display: inline-block;
      vertical-align: middle;
      width: 2rem;
      height: 2rem;
      margin-top: -0.5rem;
      margin-right: 0.5rem;
      fill: govuk-colour("white");
      // Prevent the exclamation mark from being included when the warning text
      // is copied, for example.
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      @include mq ($from: desktop) {
        width: 2.5rem;
        height: 2.5rem;
      }
  }

  .idsk--header__user-name {
    float: right;
    margin-top: -0.5rem;
  }
  
  .govuk-header__container--full-width {
    .idsk-header__user-icon {
      @include mq ($from: desktop) {
        margin-top: -0.5rem;
        margin-right: 0.5rem;
      }
    }
    
    .idsk--header__user-name {
      margin-top: -0.5rem;
    }
  }

  .idsk--header__user-logout {
    color: govuk-colour("white");
  }

  @include govuk-media-query($media-type: print) {
    .idsk-header {
      border-bottom-width: 0;
      color: govuk-colour("black");
      background: transparent;
    }

    .idsk-header__link {
      &:link,
      &:visited {
        color: govuk-colour("black");
      }

      // Do not append link href to GOV.UK link when printing (e.g. '(/)')
      &:after {
        display: none;
      }
    }
  }

  @if $govuk-use-legacy-font {
    .idsk-header {
      $offset: 3px;
      padding-top: $offset;
    }

    .idsk-header__link--homepage {
      line-height: 30px;
    }
    // End adjustments
  }

}