@import "../../helpers";
button.sf-button {
  font-family: var(--font-family--primary);
  //font-weight: normal;
  padding: 12px 0px 12px;
  @include for-desktop {
    border: 1px solid black;
    padding: 12px 32px;
  }
  &.medium span {
    font-family: var(--font-family--secondary);
  }
}
button.sf-button:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
button.sf-button.language {
  border: none;
  &:hover {
    --icon-color: var(--c-primary);
  }
}
.sf-header-navigation-item {
  position: var(--header-navigation-item-position, relative);
  display: flex;
  flex: var(--header-navigation-item-flex, 0);
  @include for-desktop {
    --header-navigation-item-flex: 1;
    --header-navigation-item-position: static;
  }
  &__content {
    position: var(--header-navigation-item-content-position, fixed);
    top: var(--header-navigation-item-content-position, 0);
    width: var(--header-navigation-item-content-width, 100%);
    z-index: var(--header-navigation-item-content-position, 2);
    --header-navigation-item-padding: 0;
  }
  &__link {
    --link-text-decoration: var(--header-navigation-item-text-decoration, none);
  }
  & > &__menu-item {
    --menu-item-font-size: var(--font-size--base);
    --menu-item-font-weight: var(--font-weight--regular);
    display: var(--header-navigation-item-menu-item-display, flex);
    padding: var(--header-navigation-item-menu-item-padding, var(--spacer-sm));
    margin: var(--header-navigation-item-menu-item-margin, 0);
    @include border(
      --header-navigation-item-menu-item-border,
      0 0 1px 0,
      solid,
      var(--c-light)
    );
  }
  &:hover > *:not(.sf-mega-menu) {
    --header-navigation-item-color: var(--c-primary);
    --header-navigation-item-border-color: var(--c-primary);
    &:active {
      --header-navigation-item-color: var(--c-primary);
    }
  }
  &.is-active:hover > *:not(.sf-mega-menu) {
    --header-navigation-item-color: var(--c-primary);
  }
  &--not-stretched {
    --header-navigation-item-flex: 0;
  }
  &__item {
    display: var(--header-navigation-item-display, flex);
    .sf-link:hover {
      background-color: transparent;
    }
    &--desktop {
      & > *:not(.sf-mega-menu) {
        --link-color: var(
          --header-navigation-item-color,
          var(--c-dark-variant)
        );
        box-sizing: border-box;
        flex: 1;
        align-items: center;
        justify-content: center;
        padding: var(
          --header-navigation-item-padding,
          calc(var(--spacer-sm) - 1px) var(--spacer-sm)
        );
        //margin: var(--header-navigation-item-margin, 0);
        @include border(
          --header-navigation-item-border,
          0 0 2px 0,
          solid,
          transparent
        );
        transition: var(
          --header-navigation-item-transition,
          border-color 150ms ease-in-out,
          color 150ms ease-in-out
        );
        color: var(--header-navigation-item-color, var(--c-dark-variant));
        @include font(
          --header-navigation-item-font,
          var(--font-weight--normal),
          var(--font-size--base),
          1.2,
          var(--font-family--primary)
        );
        //text-transform: uppercase;
        text-decoration: initial;
        text-align: center;
        @include for-desktop {
          font-size: var(--font-size--sm);
          padding: var(--spacer-sm) 0;
          margin-left: 40px;
        }
        &:focus {
          --header-navigation-item-color: var(--c-text);
          --header-navigation-item-border-color: var(--c-primary);
        }
        &:last-child {
          //color: #cc0000;
        }
      }
    }
    &--mobile {
      --header-navigation-item-padding: 0;
      --header-navigation-item-border: none;
      width: var(--header-navigation-item-width, 100%);
      & > .sf-header-navigation-item__menu-item {
        --menu-item-font-size: var(--font-size--base);
        --menu-item-font-weight: var(--font-weight--regular);
        --menu-item-text-transform: uppercase;
        display: var(--header-navigation-item-menu-item-display, flex);
        padding: var(
          --header-navigation-item-menu-item-padding,
          var(--spacer-sm)
        );
        margin: var(--header-navigation-item-menu-item-margin, 0);
        @include border(
          --header-navigation-item-menu-item-border,
          0 0 1px 0,
          solid,
          var(--c-light)
        );
      }
    }
  }
}
.sf-header-navigation {
  &__menu {
    display: var(--header-navigation-menu-display, none);
    @include for-desktop {
      --header-navigation-menu-display: flex;
    }
  }
  &__sidebar {
    --sidebar-content-padding: 0;
    display: var(--header-navigation-sidebar-display, flex);
    @include for-desktop {
      --header-navigation-sidebar-display: none;
    }
  }
}
.sf-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  &__wrapper {
    position: var(--header-wrapper-position);
    z-index: var(--header-wrapper-z-index, 999);
    width: 100%;
    background: var(--header-background, #ffffff);
    transition: var(--header-wrapper-transition, transform 150ms ease-in-out);
    transform: var(--header-wrapper-transform);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  }
  &__header {
    .sf-link:hover {
      background: transparent;
    }
    display: flex;
    //flex-wrap: var(--header-flex-wrap, wrap);
    align-items: center;
    //justify-content: center;
    justify-content: left;
    padding: 0 var(--spacer-base);
    max-width: var(--container-max-width);
    margin: var(--header-margin, 0 auto);
    @include for-desktop {
      flex-wrap: var(--header-flex-wrap, nowrap);
      justify-content: center;
    }
  }
  &__logo {
    --image-width: var(--header-logo-width, auto);
    --image-height: 35px;
    flex: 0 0 var(--header-logo-width, auto);
    margin: var(--header-logo-margin, var(--spacer-xs) 0);
  }
  &__title {
    margin: var(--header-title-margin, var(--spacer-xs) 0);
  }
  &__aside:not(:empty) {
    //margin: var(--header-aside-margin, 0 0 0 auto);
    margin-left: var(--spacer-lg);
    @include for-mobile {
      margin-right: var(--spacer-base);
    }
    @include for-tablet {
      margin-right: var(--spacer-base);
    }
  }
  &__actions {
    flex: 100%;
    display: flex;
    flex-wrap: var(--header-actions-flex-wrap, wrap);
    align-items: center;
    justify-content: flex-end;
    @include for-desktop {
      nav {
        display: flex;
      }
      flex-wrap: var(--header-actions-flex-wrap, nowrap);
    }
  }
  &__navigation {
    order: 1;
    display: var(--header-navigation-display, none);
    flex: 0 0 calc(100% + var(--spacer-sm) * 2);
    margin: var(--header-navigation-margin, 0 calc(var(--spacer-sm) * -1));
    @include for-desktop {
      --header-navigation-display: flex;
      --header-navigation-margin: 0 auto 0 var(--spacer-xl);
      order: 0;
      flex: 0 0 auto;
    }
    &.is-visible {
      --header-navigation-display: flex;
    }
  }
  &__search {
    --search-bar-display: none;
    flex: var(--header-search-flex, 0 0 100%);
    margin: var(--spacer-xs) 0;
    @include for-desktop {
      --search-bar-display: flex;
      --header-search-flex: 0 1 19.875rem;
    }
  }
  &__icons {
    order: var(--header-icons-order);
    display: var(--header-icons-display, none);
    margin: var(--header-icons-margin);
    @include for-desktop {
      --header-icons-display: flex;
      --header-icons-margin: 0;
      margin: var(--header-icons-margin, var(--spacer-sm) 0);
      .sf-button {
        font-size: var(--font-size--sm);
      }
    }
  }
  &__icon {
    --icon-color: var(--c-dark-variant);
    --icon-badge-top: -0.5rem;
    --icon-badge-right: -0.5rem;
    &:hover {
      --icon-color: var(--c-text);
      filter: var(
        --header-icon-filter,
        drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))
      );
    }
    &.is-active {
      --icon-color: var(--c-primary);
    }
  }
  &__action {
    //margin: var(--header-action-margin, 0 0 0 var(--spacer-xl));
  }
  &-height {
    box-sizing: border-box;
  }
  &.is-sticky {
    --header-wrapper-position: fixed;
  }
  &.is-hidden {
    --header-wrapper-transform: translate3d(0, -100%, 0);
    --header-wrapper-transition: transform 300ms ease-in-out;
  }
  &--has-mobile-search,
  &--has-mobile-navigation {
    --header-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
    @include for-desktop {
      --header-box-shadow: none;
    }
  }
  &--has-mobile-search {
    & .sf-header__search {
      --search-bar-display: flex;
    }
  }
  &--has-mobile-navigation {
    --header-navigation-display: flex;
  }
  &--multiline {
    @include for-desktop {
      --header-icons-margin: var(--spacer-sm) 0 var(--spacer-sm) 100%;
      --header-icons-order: -1;
      --header-actions-flex-wrap: wrap;
      --header-navigation-item-padding: calc(var(--spacer-sm) - 1px)
        var(--spacer-sm);
    }
  }
}