@import "../../base";
@import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";

@include govuk-exports("idsk/component/header-extended") {
  $idsk-header-background: govuk-colour("white") !default;
  $idsk-header-border-color: $idsk-brand-colour !default;
  $idsk-header-dark-blue: govuk-colour("dark-blue") !default;
  $idsk-header-light-blue: govuk-colour("blue") !default;
  $idsk-header-link: govuk-colour("white") !default;

  .idsk-header-extended {
    @include govuk-font($size: 16);
    padding-top: govuk-spacing(6);

    color: $idsk-header-dark-blue;
    background: $idsk-header-background;

    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background-color: $idsk-header-dark-blue;
    }

    &__container {
      @include govuk-clearfix;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: wrap row;
              flex-flow: wrap row;
    }

    /// content menu navigation
    &__content {
      width: 100%;

      @include mq($from: desktop) {
        float: left;
        margin-left: -30px;
        margin-right: -30px;
      }
    }
  }

  .idsk-header__link {
    text-decoration: none;

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

    &:hover {
      text-decoration: underline;
    }

    &:focus,
    &:active {
      @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;
      }
    }
  }

  ///  logo part
  .idsk-header-extended__logo {
    padding-left: 0;
    padding-bottom: govuk-spacing(3);
    margin-right: auto;

    @include mq($until: mobile) {
      width: 70%;
    }

    @include mq($until: tablet) {
      padding-bottom: govuk-spacing(3);
      max-width: 70%;
    }

    @include mq($from: desktop) {
      padding: 0 0 govuk-spacing(6) 0;
    }

    & > a {
      display: initial;

      &:focus svg,
      &:active svg,
      &:focus img,
      &:active img {
        @include govuk-focused-text;
      }
    }

    & img,
    & svg {
      height: 100%;
      max-height: 50px;
      max-width: 100%;

      @include mq($from: desktop) {
        max-height: 100px;
      }
    }
  }

  /// logo svg image
  .idsk-header-extended__logotype-crown {
    max-width: 246px;
    position: relative;
    fill: currentColor;

    &-fallback-image {
      width: 36px;
      height: 32px;
      border: 0;
    }
  }

  /// logo svg image - mobile view
  .idsk-header-extended__logotype-crown-mobile,
  .idsk-header-extended__logotype-crown-mobile-navigation,
  .idsk-header-extended__logotype-crown-mobile-small-navigation {
    display: none;
  }

  @include mq($until: desktop) {
    .idsk-header-extended.idsk-header-extended--shrink {
      .idsk-header-extended__logo {
        padding-bottom: govuk-spacing(3);
      }

      .idsk-header-extended__logotype-crown,
      .idsk-header-extended__logotype-crown-mobile-navigation {
        display: none;
      }

      .idsk-header-extended__logotype-crown-mobile {
        display: inline-block;
      }
    }
  }

  @include mq($until: desktop) {
    .idsk-header-extended__mobile,
    .idsk-header-extended__search,
    .idsk-header-extended__language,
    .idsk-header-extended__social,
    .idsk-header-extended__content {
      display: none;
    }
  }

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

    padding-right: govuk-spacing(4);

    &-label {
      color: govuk-colour("black");
      position: absolute;
      padding: govuk-spacing(1);

      &.idsk-header-extended__search-input--focus {
        z-index: -1;
      }
    }

    &-form:focus-within {
      .idsk-header-extended__search-label {
        z-index: -1;
      }
    }

    .govuk-input {
      height: 30px;
      width: 200px;
      border: 1px solid govuk-colour("black");

      &:focus {
        z-index: 2;
      }
    }

    .govuk-button {
      height: 30px;
      width: 28px;
      font-size: 12px;
      margin-left: -4px;
      padding-top: 7px;
      padding-left: govuk-spacing(1);
      background-color: govuk-colour("blue");
      box-shadow: none;
    }
  }

  /// language selector
  .idsk-header-extended__language {
    @include govuk-font($size: 19);

    padding: 0 govuk-spacing(3) govuk-spacing(1) 0;

    &--active .idsk-header-extended__language-button::after {
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s;
      -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
              transform: rotate(180deg);
    }

    &--active &-list {
      display: block;
      position: absolute;
    }

    &-button {
      @include govuk-font($size: 19);

      background: none;
      border: none;
      padding-right: govuk-spacing(6);

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

        outline: none;
      }

      &:after {
        position: absolute;
        margin-top: 8px;
        margin-left: govuk-spacing(2);
        border-style: solid;
        border-width: 5px 5px 0;
        border-color: $idsk-header-dark-blue transparent transparent;
        content: "";
        -webkit-transition: -webkit-transform 0.2s;
        transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
        transition: transform 0.2s, -webkit-transform 0.2s;
      }
    }

    &-list {
      display: none;

      list-style: none;
      padding: 0;
      margin: 0;
      text-align: left;
      margin-top: govuk-spacing(2);
      background-color: govuk-colour("white");

      &-item {
        padding: govuk-spacing(1);
      }

      &-link {
        color: $idsk-header-dark-blue;
        display: block;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }

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

  /// social icons
  .idsk-header-extended__social {
    &-list {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }

    &-item {
      display: inline-block;
      padding: 0 4px;
    }

    &-link {
      @include govuk-font($size: 19);

      color: $idsk-header-dark-blue;

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

  .idsk-header-extended--left {
    margin-left: auto;
  }

  /// navigation
  .idsk-header-extended__navigation {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;

    &-item {
      padding: govuk-spacing(3) 0;

      @include mq($from: desktop) {
        display: inline-block;
        border: none;
        padding: govuk-spacing(3) govuk-spacing(6);
      }

      & > a {
        @include govuk-font($size: 19, $weight: bold);
        white-space: nowrap;
        text-decoration: none;

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

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

      /// arrow
      .idsk-header-extended__arrow::after {
        @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
        border-color: $idsk-header-link transparent transparent;
        content: "";
        position: relative;
        left: 10px;
        -webkit-transition: -webkit-transform 0.2s;
        transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
        transition: transform 0.2s, -webkit-transform 0.2s;

        @include mq($from: desktop) {
          display: none;
        }
      }

      &--active {
        background-color: $idsk-header-dark-blue;

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

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

        .idsk-header-extended__arrow::after {
          -webkit-transition: -webkit-transform 0.2s;
          transition: -webkit-transform 0.2s;
          transition: transform 0.2s;
          transition: transform 0.2s, -webkit-transform 0.2s;
          -webkit-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
                  transform: rotate(180deg);
        }

        .idsk-header-extended__navigation-submenu {
          display: block;
        }
      }
    }
  }

  /// navigation - submenu
  .idsk-header-extended__navigation-submenu {
    display: none;
    left: 0;
    background-color: $idsk-header-dark-blue;
    width: 100%;
    padding: 0;
    z-index: 10;

    @include mq($from: desktop) {
      position: absolute;
      padding: govuk-spacing(4) 0;
      margin-top: govuk-spacing(3);
    }

    a {
      color: $idsk-header-link;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      font-style: normal;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
        color: $idsk-header-link;
        background: none;
      }

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

    ul {
      display: block;
      padding-left: govuk-spacing(1);

      li {
        display: inline-block;
        padding: govuk-spacing(1) govuk-spacing(4);
        width: 20%;
        color: $idsk-header-link;

        @include mq($until: desktop) {
          width: 100%;
          padding: 0;
          padding-bottom: govuk-spacing(2);
        }

        &:before {
          content: "\2022"; // unicode for a bullet
          color: $idsk-header-link;
          font-weight: bolder;
          display: inline-block;
          width: 20px;
          font-size: 20px;
        }

        i {
          font-size: 10px;
          padding-right: 8px;
        }
      }
    }
  }

  /// navigation - hmaburger button
  .idsk-header-extended__menu-button {
    @include govuk-font($size: 24);
    font-weight: 700;
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0;
    border: 0;
    color: $idsk-header-dark-blue;
    background: none;
    display: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;

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

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

      /// Hide the inverted crown when printing in browsers that don't support SVG.
      &__logotype-crown-fallback-image {
        display: none;
      }

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

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

  .js-enabled .idsk-header-extended {
    @include mq($until: desktop) {
      position: fixed;
      top: 0;
      padding-top: govuk-spacing(3);
      width: 100vw;
      display: table;
      overflow-y: scroll;
      z-index: 11;
    }

    &__mobile {
      background: $idsk-header-dark-blue;
      display: none;
      height: 100%;
      left: 0;
      overflow-x: hidden;
      padding: govuk-spacing(3);
      position: fixed;
      top: 0;
      width: 0;
      z-index: 11;

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

    &__mobile-close {
      background: none;
      border: none;
      color: $idsk-header-link;
      cursor: pointer;
      display: none;
      font-size: 31px;
      height: 20px;
      line-height: 16px;
      padding-left: 0;
      position: absolute;
      right: 25px;
      top: 25px;
      width: 25px;
      z-index: 5;

      &:after {
        content: "\2715";
      }

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

      @include mq($from: tablet) {
        right: 50px;
      }
    }

    &__menu-button {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;

      @include mq($from: tablet) {
        right: 40px;
      }

      @include mq($from: desktop) {
        display: none;
      }
    }

    @include mq($until: desktop) {
      &-notification {
        padding-top: 91px;
      }
    }

    &.idsk-header-extended--show-mobile-menu {
      @include mq($until: desktop) {
        height: 100%;
        overflow-y: scroll;
        display: inline-block;
        z-index: 11;

        .idsk-header-extended__mobile {
          display: block;
          width: calc(100% - 30px);
          height: calc(100% - 30px);

          @include mq($from: tablet) {
            width: calc(100% - 60px);
            height: calc(100% - 45px);
          }
        }

        .idsk-header-extended__mobile-close {
          display: block;
        }

        .idsk-header-extended__mobile .idsk-header-extended__logo {
          z-index: 12;

          &type-crown,
          &type-crown-mobile {
            display: none;
          }

          &type-crown-mobile-navigation {
            max-width: 246px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
          }
        }

        .idsk-header-extended__mobile .idsk-header-extended__search {
          clear: both;
          display: block;
          margin-top: govuk-spacing(2);

          .idsk-header-extended__search-form:focus-within {
            .idsk-header-extended__search-label {
              z-index: -1;
            }
          }

          .idsk-header-extended__search-label {
            @include govuk-font($size: 24);

            padding: govuk-spacing(3);

            @include mq($from: tablet) {
              width: calc(100% - 60px);
              padding: govuk-spacing(2);
            }

            &.idsk-header-extended__search-input--focus {
              z-index: -1;
            }
          }
          .govuk-input {
            height: 50px;
            max-width: 240px;
            width: 100%;
            border: 1px solid govuk-colour("black");

            &.idsk-header-extended__search-input--focus,
            &:focus {
              z-index: 2;
            }
          }
          .govuk-button {
            margin-top: 1px;
            font-size: 19px;
            height: 48px;
            width: 48px;
            padding-left: 9px;
          }
        }

        .idsk-header-extended__mobile .idsk-header-extended__content {
          display: block;
          margin-bottom: govuk-spacing(6);

          a {
            @include govuk-font($size: 36);

            color: $idsk-header-link;
            padding-left: 0;
          }

          &-item--active .idsk-header-extended__link {
            @include govuk-focused-text;
          }

          .idsk-js-header-extended-submenu-toggle {
            padding-right: govuk-spacing(4); // space for arrow, should be focused too
          }

          .idsk-header-extended__navigation-submenu {
            padding-top: govuk-spacing(4);

            ul {
              padding-left: 0;
              margin-left: 0;
            }

            li a {
              @include govuk-font($size: 27);

              &:hover,
              &:active {
                background: govuk-colour("yellow");
                color: $idsk-header-dark-blue;
                font-weight: 600;
                text-decoration: none;
              }

              &.active {
                font-weight: 600;
              }
            }
          }
        }

        .idsk-header-extended__hr {
          border: none;
          border-top: 2px solid govuk-colour("white");
        }

        .idsk-header-extended__mobile .idsk-header-extended__language {
          @include govuk-font($size: 36);

          display: block;
          margin-top: govuk-spacing(3);
          padding-left: 0;
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;

          &-button {
            @include govuk-font($size: 36);

            color: govuk-colour("white");
            padding-right: govuk-spacing(6);
            padding-left: 0;
          }

          &-button:after {
            border-color: govuk-colour("white") transparent transparent;
            margin-top: govuk-spacing(2);
            border-width: 8px 5px 0;
          }

          &-list {
            background: none;
            position: relative;
            width: 100%;
          }
          &-list-link {
            color: govuk-colour("white");
          }
        }

        .idsk-header-extended__social {
          display: block;
          margin-top: govuk-spacing(4);

          &-link {
            color: govuk-colour("white");
          }

          &-item:first-child {
            padding-left: 0;
          }
        }
      }

      &.idsk-header-extended--shrink {
        @include mq($until: desktop) {
          .idsk-header-extended__logotype-crown-mobile,
          .idsk-header-extended__logotype-crown-mobile-navigation {
            display: none;
          }

          .idsk-header-extended__logotype-crown-mobile-small-navigation {
            display: inline-block;
          }
        }
      }
    }

    &.idsk-header-extended--cookie{
      @include mq($until: desktop) {
        position: absolute;
      }
    }
  }

  .idsk-header-extended__language--current-text img,
  .idsk-header-extended__language-list-link img {
    width: 15%;
  }

  // Handle focus event on skip link
  .idsk-skip-link--sticky:focus + .idsk-header-extended {
    @include mq($until: tablet) {
      top: 2.28124rem;
    }

    @include mq($from: tablet) {
      top: 2.53124rem;
    }
  }

  .idsk-skip-link--sticky:focus ~ .idsk-header-extended-notification {
    @include mq($until: desktop) {
      padding-top: 7.938rem;
    }
  }
}

/// IE10+ CSS styles
/// ie doesnt recognize position: sticky
/// need to be there cause some part of top of contet will not be visible
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .idsk-header-extended-ie-fix {
    height: 55px;
    @include mq($from: desktop) {
      height: 0;
    }
  }
}