@import '~@od/global-resources/scss/settings/index';

@import 'logo';
@import '../../global_components/search_bar/search_bar';
@import 'menu';
@import 'help_menu';
@import 'cart_menu';
@import 'navigation_menu';
@import 'mobile_navigation';
@import 'site_preview';
@import 'email_signup_modal';
@import 'persistent_banner';
@import 'quick_tools_navigation';
@import 'refresh';
@import 'my_default_store';
@import 'mobile_my_default_store';
@import '_refresh_quick_tools_navigation';
@import '_contact_us';
@import '_notification';

$sub-header-border-color: #bec0c3;

header.header-responsive {
  padding: 12px 0 26px;
  background-color: $white;
  position: relative;

  &.big-index, .has-search-active & {
    z-index: $zindex-modal;
  }

  .logo-container {
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.header-row-container {
  max-width: $site-width;
  margin: 0 auto;
  padding: 6px 6px 6px $logo-dimensions + 34px;
  position: relative;
}

header.refresh {
  .header-row-container {
    padding: 6px 6px 6px $logo-dimensions-refresh + 34px;
    height: $logo-dimensions-refresh;
  }
  .header-menu-item {
    &.header-store-locator {
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        @include font-size(12px);
        line-height: 14px;
      }
    }
    &.mSite.header-store-locator {
      display: inline-block;
      @include font-size(12px);
      a {
        padding: 0;
        color: $blue
      }
    }
  ;
  }
}

.header-row {
  &.first-row {
    @include font-size(14px);
    min-height: 32px;
  }

  &.second-row {
    @include font-size(14px);

    .menu-arrow:after {
      border-color: $white;
      bottom: 6px;
      right: 0px;
    }

    .cls-1 {
      stroke: $white;
      stroke-width: 1;
    }
  }
}

@media (min-width: $screen-xl-min) {
  .header-row.second-row {
    margin-top: 9px;
  }
}

@media (min-width: $screen-md-min) and (max-width: $screen-lg-max) {
    header.header-responsive {
      padding-bottom: 27px;
    }

  .header-row.second-row {
    margin-top: 10px;
  }
}

@media (min-width: $screen-md-min) and (max-width: $screen-lg-min) {
  .header-row.second-row {
    margin-top: 11px;
  }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
  .header-row.second-row {
    margin-top: 1px;
  }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  $logo-sm-dimensions: 90px;

  header.header-responsive {
    padding-bottom: 14px;

    .header-row-container {
      padding-left: $logo-sm-dimensions + 25px;
    }

    .logo-container {
      width: $logo-sm-dimensions;
      height: $logo-sm-dimensions;
    }

    .second-row .header-menu-item {
      padding: 0 6px;
    }
  }
}

@media ( max-width: $screen-xs-max + 12px){
  $logo-xs-dimensions: 77px;
  header.header-responsive {
    padding-bottom: 0;
    padding-top: 0;
    border-bottom: 0;

    .header-row-container {
      padding-left: 85px;
    }

    .logo-container {
      top: 2px;
      left:0;
      width: $logo-xs-dimensions;
      height: $logo-xs-dimensions;
    }
  }
}

//Content wrapper behaviour
.header-responsive ~ #contentWrapper,
.header-responsive ~ #footerWrapper {
  overflow-x: auto;
}

header.refresh {
  .header-row.second-row {
    margin-top: 0;
  }
  .account-stacked-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .avatar-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid $black;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 15px;
    padding: 4px 3px;
    width: 28px;
    height: 28px;
    margin-right: 5px;
    font-size: 12px;
    color: $black;

    svg {
      width: 20px;
      height: 20px;
      fill: $black;
    }
  }
  .account-info {
    display: flex;
    flex-direction: column;
  }
  .account-label, .account-id {
    font-size: 12px;
    line-height: 14px;
    color: $black;
  }
  .account-label {
    color: $black;
  }
  .account-id {
    color: $blue;
  }

  svg {
    width: 24px;
    height: 24px;
    margin-right: 5px;
  }

  .chat-icon-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }


  p {
    font-size: 12px;
    line-height: 14px;
  }

  .header-menu-item .flyout-menu {
    top: 127%;
  }

  .header-store-locator {
     a {
       font-size: 12px;
       text-transform: capitalize;
       font-weight: normal;
       color: $blue;
       padding-left: 0;
    }
  }
}

.login_reminder {
  width: 100%;
  padding-top: 0.8rem;
  text-align: center;
  background: #FECB2E;
  box-sizing: border-box;
  height: 2.5rem;
}

.login_reminder_link {
  color: #003695;
}

.login_reminder_desktop {
  display: block;
}

.login_reminder_mobile {
  display: none;
}

@media (max-width: $screen-sm) {
  .login_reminder_desktop {
    display: none;
  }

  .login_reminder_mobile {
    display: block;
  }

  .login_reminder_text {
    font-size: 10px !important;
  }
}

@media ( max-width: $screen-xs-max) {
  header.refresh {
    .avatar-badge {
      margin-right: 0px;

    }
    .contact-us-mobile {
      .flyout-contact-title {
        margin-bottom: 12px;
        margin-top: 12px;
      }
      .csr-info {
        a {
          color: $blue !important;
          cursor: pointer;
        }
      }
      .primary {
        width: 100%;
        color: $white !important;
        margin-top: 12px;
      }

    }
  }
}