//////// New clean header ////////

.header {
  display: flex;
  align-items: center;
  height: $header-height;
  background-color: $header;
  grid-area: header;
}

.header .navlinks {
  display: flex;
  flex-grow: 1;
}

.header .navlinks.left {
  display: none;

  @include media-breakpoint-up(lg) {
    display: flex;
  }
}

.header .navlinks.right {
  justify-content: end;
  padding-right: $spacing-xs;
  @include media-breakpoint-up(lg) {
    padding-right: $spacing;
  }
}

.header .navlinks.logo-wrapper {
  flex-grow: 0;
  padding-left: $spacing-xs;
  @include media-breakpoint-up(lg) {
    width: $sidebar-width;
    justify-content: center;
    padding-left: 0;
  }
}


.header .navlink,
.header a.navlink,
.header .dropdown-link,
.header-dropdown .dropdown-link {
  position: relative;
  display: inline-flex;
  height: $btn-height;
  align-items: center;
  justify-content: start;
  margin-right: 1px;
  padding: $spacing-xs;
  font-size: $font-size-base;
  font-weight: 600;
  color: $white;
  border-radius: $border-radius;
  line-height: 1.1;

  & .icon:first-child {
    margin-right: $icon-spacing;
  }

  &:hover, &:focus, &.active:hover {
    color: $white;
    background-color: $petrol-dark;
  }
  &:hover .icon {
    color: $white;
  }
  &.active {
    color: $link-hover-color;
    background-color: $petrol-dark;
  }
  &.active .icon {
    color: $link-hover-color;
  }
  &.active:hover .icon {
    color: $white;
  }
  &:last-child {
    margin-right: 0;
  }
}

.header-dropdown .navlink .icon, 
.header .dropdown-link .icon,
.header-dropdown .dropdown-link .icon {
  width: $spacing;
  margin-right: 0;
  flex-shrink: 0;

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

@include media-breakpoint-down(lg) {
  .header .navlink.responsive-label {
    font-size: 0; 
  }
  .header .navlink.responsive-label .icon {
    width: auto;
    margin-right: 0 !important;
  }
}

.header .header-logo::before {
  display: block;
  content: url("@images/logo-testio/testio_horizontal_tealpurple_white.svg");
  overflow: hidden;
  height: $spacing-md;
  width: 128px;
  @include media-breakpoint-down(xs) {
    height: 13px;
    width: 74px;
  }
}

/*///// Mobile menu /////*/

.header .mobile-links {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  @include media-breakpoint-up(lg) {
    display: none;
  }
}

.mobile-menu-btn {
  height: 100%;
  cursor: pointer;
}

.mobile-links[open] .mobile-menu.sidebar {
  position: fixed;
  display: flex;
  top: $header-height;
  left: 0px;
  z-index: 100;
  height: 100vh;
}

details[open].mobile-links summary.mobile-menu-btn:after {
  position: fixed;
  z-index: 10;
  display: block;
  height: 100vh;
  width: 100vw;
  cursor: pointer;
  background-color: transparent;
  content: "";
  bottom: 0;
  left: 0;
}

details[open].mobile-links details[open].header-dropdown summary:before {
  display: none;
}

details[open].mobile-links .navlinks {
  flex-direction: column;
  overflow-y: scroll;
  padding-bottom: $spacing;
  &::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

details[open].mobile-links .toggle-label {
  margin-left: $spacing-xs;
  font-size: $font-size-xs;
  font-weight: 600;
  color: $white;
  user-select: none;
}

/*///// Header dropdown /////*/

.header .dropdown-menu {
  z-index: 20;
}

.header-dropdown {
  position: relative;
}

.header-dropdown summary.navlink {
  position: relative;
  cursor: pointer;
}

.header .dropdown-menu .navlink {
  height: auto;
  min-height: $btn-height;
}

.header-dropdown summary:after {
  display: inline-block;
  background-color: $white;
  content: "";
  mask-image: url("@images/triangle-down.svg");
  mask-repeat: no-repeat;
  width: 8px;
  height: 8px;
  margin-left: $spacing-xs;
}

details[open].header-dropdown summary:after {
  mask-image: url("@images/triangle-up.svg");
}

details[open].header-dropdown summary:before {
  position: fixed;
  z-index: 10;
  display: block;
  height: 100vh;
  width: 100vw;
  cursor: pointer;
  background-color: transparent;
  content: "";
  bottom: 0;
  left: 0;
}

details[open].header-dropdown .dropdown-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  transform-origin: top right;
  left: 0;
  top: $header-height;
  margin-top: 0;
  padding: $spacing-xxs;
  min-width: 200px;
  color: $white;
  background-color: $header;
  max-height: 500px;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/*///// Header profile dropdown /////*/

.user-menu .btn-profile {
  position: relative;
  cursor: pointer;
} 

.user-menu summary {
  height: 100%;
}

details[open].header-dropdown .dropdown-menu.profile-dropdown {
  transform-origin: top right;
  right: 0;
  left: auto,
}

.header .btn-profile .user-initials {
  color: $black;
  background-color: $white;
}

.user-profile {
  width: $spacing;
  height: $spacing;
  border-radius: 50%;
}

.user-details {
  display: none;
  justify-content: start;
  flex-direction: column;
  margin-left: $spacing-xs;
  @include media-breakpoint-up(xl) {
    display: flex;
  }
}

.header .profile-name,
.header .profile-role {
  font-size: $font-size-label;
  line-height: 1.1;
}



/*///// Customer product dropdown /////*/

.header-dropdown[open] .dropdown-menu.products-dropdown {
  position: fixed;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  left: 0;
  top: $header-height;
  padding: $spacer;
  padding-bottom: $spacing-lg;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px solid $gray-darkest;
}

.header-dropdown .navlink.product {
  flex-direction: column;
  text-align: center;
  max-width: $spacing-2xl + $spacing-md;
  img {
    height: $spacing-2xl;
    width: $spacing-2xl;
    margin-bottom: $spacing-xs;
    border-radius: $border-radius;
  }
  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: $spacing-2xl;
    width: $spacing-2xl;
    margin-bottom: $spacing-xs;
    margin-right: 0;
    background-color: $primary;
    border-radius: $border-radius;
    color: $white;
  }
  .icon::before {
    font-size: $icon-lg;
  }
  .icon:first-child {
    margin-right: 0;
  }
}

.navlink.product.dashed .icon {
  background-color: transparent;
  border: $border-width dashed $white;
}

.navlink.product.dashed:hover .icon {
  border-color: $navlink-customer-hover-color;
}

.navlink.product.website .icon {
  background-color: $color-product-website;
}

.navlink.product.android .icon {
  background-color: $color-product-android;
}

.navlink.product.apple .icon {
  background-color: $color-product-apple;
}

.navlink.product.gaming .icon {
  background-color: $color-product-gaming;
}

.navlink.product.streaming .icon {
  background-color: $color-product-streaming;
}

.navlink.product.windows .icon {
  background-color: $color-product-windows;
}

.navlink.product.website:hover .icon,
.navlink.product.android:hover .icon,
.navlink.product.apple:hover .icon,
.navlink.product.gaming:hover .icon,
.navlink.product.streaming:hover .icon,
.navlink.product.windows:hover .icon {
  color: $white;
}

////// Header toggle //////

.header-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: $spacing-xs;
  color: $white;
  font-size: $font-size-xs;
  line-height: 1;
}

.header .toggle-switch {
  width: 40px;
  height: $spacing-md;
  margin-left: $spacing-xs;
  border-radius: 10px;
}

.header .toggle-switch .slider:before {
  width: 16px;
  height: 16px;
}

.header .toggle-switch .slider {
  background-color: $gray-darker;
}

.header .toggle-switch input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}