@import '../core/variables';


@mixin nav-item {
  color:get-colour(grey-400); // IE
  text-decoration: none; //IE
  padding: 10px 25px;
  border-top: 1px solid #e2e2e2;
  background-color: get-colour(grey-500); // IE

  // IE
  &:hover,
  &:active,
  &.active,
  a[active]:not([active="false"]) {
    color: get-colour(blue-900);
  }
}

:host {
  --link-color:Var(--sdds-grey-400);
  --link-decoration: none;
  --link-color-hover: Var(--sdds-blue-900);

  display: block;
  font-family: 'Scania Sans';
  //FIXME: Add correct rem
  font-size: 3.5rem;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #fff;
  z-index: 10;
}
:host([slot=sub]) {
  background-color: #fff;
  text-transform: capitalize;
  font-weight: normal;
  width: 0;
  transition: width 250ms ease;

  .navbar-container:not(.open) {

    .navbar {
      height: 0;
    }
  }
}
:host([slot=sub][expand=true]),
:host([slot=sub].expand) {
  width: 100%;
}

:host(:not([slot=sub])) {

  > .navbar-container {
    display: flex;
    flex-flow: row nowrap;
    height: calc(75vh - 64px);
    transition: height 500ms ease;

    &:not(.open) {
      height: 0;
    }

    > .navbar {
      width: 100%;
      margin-left: 0;
    }
  }
}
// If we can fix the bug in the css parser for ie
// Then this rule needs to have [expand] as well
:host([expand=true]:not([slot=sub])),
:host(.expand:not([slot=sub])) {

  >.navbar-container {

    > .navbar {
      margin-left: -100%;
    }
  }
}

::slotted(a) {
  @include nav-item;
}

// IE
::slotted(a:hover),
::slotted(a:active),
::slotted(a.active),
::slotted(a[active]:not([active="false"])) {
  color: get-colour(blue-900);
}
::slotted(div) {
  border-top: 1px solid #e2e2e2;
  padding: 10px 25px;

  // IE
  a {
    color: get-colour(grey-400);
    text-decoration: none;

    &:hover,
    &:active,
    &.active,
    a[active]:not([active="false"]) {
      color: get-colour(blue-900);
    }
  }
}
:host(:not([slot=sub])) ::slotted(a:first-of-type) {
  border-top: 0;
}

ul {
  margin: 0;
}

.navbar {
  transition: margin-left 250ms ease;
  display: block;
  padding: 0;
  overflow-y: auto;

  .navbar-nav {

    background-color: get-colour(grey-500); // IE

    .nav-item {
      @include nav-item;

      &.toggle-sub {
        border-top: 0;
        position: relative;
      }
    }
    .caption {
      display: none;
    }
  }
}

@media (min-width: 992px) {

  %nav-item-desktop {
    padding: 20px 0;
    border-top: 0;
    background: transparent;

    &:before,
    &:after {
      content: "";
      padding: 0 15px;
    }
  }
  %nav-item-sub-desktop {
    padding: 10px 14px;
    position: relative;

    &:before,
    &:after {
      content: none;
    }
  }
  %nav-item-sub-desktop-hover {

    &:after {
      content: '';
      border-bottom: 2px solid get-colour(red-600); // Fallback for non supported browsers
      border-bottom: 2px solid Var(--sdds-red-600);
      position: absolute;
      left: 15px;
      right: 15px;
      bottom: 12px;
      margin-bottom: -4px;
    }
  }
  %nav-item-separator-desktop-before {
    border-left: 1px solid #e2e2e2;
  }

  :host {
    --link-bg : transparent;
    --link-bg-hover: transparent;

    background-color: #fff;
    flex-direction: column;
    position: sticky;
    position: -webkit-sticky;
    top:0;

    .navbar-symbol {
      padding: 13px;
      background-color: inherit;
      z-index: 10;
      display: block;
      position: absolute;
      top:0px;
      right: 55px;

      &:before {
        position: absolute;
        content: '';
        // These files are generated and will exist in dist
        background-image: url(../images/symbol.png);
        background-image: url(../images/symbol.svg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 48px;
        height: 0;
        transition: top 250ms ease-in-out 50ms, height 50ms ease-in-out;
        top: -50px;
      }
    }
  }
  :host(:not([slot=sub])) {

    > .navbar-container {
      border-bottom: 1px solid #d3d3d3;
      display: block;
      height: auto;

      &:not(.open) {
        height: auto;
      }
    }
  }
  :host([slot=sub]) {
    background-color: #f5f5f5;
    border-top: 1px solid #d3d3d3;
    padding: 0 15px;
    min-width: 100%;

    .navbar-container {

      &, &:not(.open) .navbar {
        height: auto;
      }
    }
    ::slotted(a) {
      @extend %nav-item-sub-desktop;
    }

    ::slotted(a:hover),
    ::slotted(a:active),
    ::slotted(a[active]:not([active="false"])),
    ::slotted(a.active) {
      @extend %nav-item-sub-desktop-hover;
    }

    .navbar-symbol {
      display: none;
    }

    .navbar {

      .navbar-nav {

        .nav-item {
          @extend %nav-item-sub-desktop;
        }
        .caption {
          display: block;
          color: #000;
          text-transform: uppercase;

          &:after {
            content: "";
            border-right: 1px solid #e2e2e2;
            padding: 0 15px;
          }
        }
      }
    }
  }
  :host([slot=sub][expand]),
  :host([slot=sub].expand) {
    display: none;
  }
  :host([slot=sub][active]:not([active="false"])),
  :host([slot=sub].active) {
    display: block;
  }
  // We have a bug in the css parser for ie, it cant handle multiple :not
  // Would like to have: :host([expand=true]:not([expand=false]):not([slot=sub])),
  :host([expand=true]:not([slot=sub])),
  :host(.expand:not([slot=sub])) {

    >.navbar-container {

      > .navbar {
        margin-left: 0;
      }
    }
  }

  ::slotted(a){
    @extend %nav-item-desktop;

    display: flex;
  }

  // TODO: Remove this fix when we have solution for css vars being generated by Stencil
  ::slotted(a[active]:not([active="false"])) {
      background: inherit;
  }
  ::slotted(div) {
    @extend %nav-item-desktop;

    display: flex;
    border-top:0;
    background: transparent;
  }
  ::slotted(a:not(:first-child)) {

    &:before {
      @extend %nav-item-separator-desktop-before;
    }
  }
  ::slotted(div:not(:first-child)) {

    &:before {
      @extend %nav-item-separator-desktop-before;
    }
  }
  ::slotted(a[slot="secondary-items"]):before {
    border-left: 0;
  }
  ::slotted(a[slot="secondary-items"]:not(:last-of-type)):after {
    border-right: 1px solid #e2e2e2;
  }

  .navbar {
    display: flex;
    transition: padding-right 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
    height: auto;
    padding-bottom: 0;
    overflow-y: visible;

    .navbar-nav {
      background-color: transparent; // IE

      .nav-item {
        @extend %nav-item-desktop;

        border-top: 0;

        &:first-of-type {
          border-bottom: 0;
        }

        + .nav-item {

          &:before {
            @extend %nav-item-separator-desktop-before;
          }
        }
      }
    }

  }

  :host([stuck=true]:not([slot=sub])) {

    > .navbar-container  {
      background: #fff;
      -webkit-box-shadow: 0px 17px 15px -15px rgba(0, 0, 0, 0.15);
      box-shadow: 0px 17px 15px -15px rgba(0, 0, 0, 0.15);

      >.navbar {
        padding-right: 80px;
      }
    }

    .navbar-symbol {

      &:before {
        top:12px;
        width: 40px;
        height: 38px;
      }
    }
  }
}

// IE special handling
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  :host {
    height: auto;
  }

  @media (min-width: 992px) {
    :host {
      position: relative;
    }

    :host([stuck=true]:not([slot=sub])) {

      >.navbar-container {
        // this is a fix for sticky navigation in IE to get a full width when page refreshed
        width: inherit;
        position: fixed;
        top: 0;
      }
    }
  }
}