/* -------------------------------------------
	1. Header
    1-1. Default Header
    1-2. Custom Header
  2. Header Elements
    2-1. Mini Basket Box
    2-2. Mobile Menu Toggler
    2-3. Logo
    2-4. Account
    2-5. Language & Currency Switcher
    2-6. Welcome Messsage
---------------------------------------------- */

// 1. Header
// 1-1. Default Header
.default-header {
  padding-top: 2rem;
  padding-bottom: 2rem;

  .logo {
    width: 13.5rem;
  }

  .menu>.menu-item-has-children>a:after {
    #{$right}: -0.5rem;
  }
}

// 1-2. Custom Header
.custom-header {
  a.logo {
    margin: 0;
  }

  .elementor-widget {
    width: auto;
  }

  .elementor-top-section {

    .sticky-content-wrapper,
    .sticky-content-wrapper>.elementor-section {
      width: 100%;
    }
  }
}

.sticky-header .custom-header,
.absolute-header {
  position: absolute;
  width: 100%;
  #{$left}: 0;
  top: 0;
  z-index: 1040;
}

header .elementor-widget {
  margin-#{$right}: 2rem;

  >.elementor-widget-container {
    margin-#{$right}: 2rem;
  }

  &:has(.elementor-widget-container),
  &:last-child,
  &:last-child>.elementor-widget-container {
    margin-#{$right}: 0;
  }
}

// 2. Header Elements
// 2-1. Mini Basket Box
.mini-basket-box {
  &:not(.cart-dropdown)>a {
    line-height: inherit;
  }

  >a::after {
    content: none;
  }

  .dropdown-box {
    padding: 3rem;
    min-width: 34rem;

    &.empty {
      min-width: 28.7rem;
    }
  }

  &.offcanvas .offcanvas-content {
    padding: 2.9rem 3rem;
  }

  .button,
  .btn {
    border-radius: var(--alpha-border-radius);
  }

  &.offcanvas-type {
    &::after {
      content: none;
    }

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--alpha-change-border-color);
    }

    h3 {
      margin-bottom: 0;
      font-size: 1.1429em;
      font-weight: 700;
      text-transform: uppercase;
    }

    .btn-close {
      text-transform: capitalize;
      font-weight: 400;
      color: var(--alpha-dark-body-color);

      &:hover {
        color: var(--alpha-primary-color);
      }
    }

    .dropdown-box {
      position: fixed;
      top: 0;
      #{$right}: -34rem;
      height: 100vh;
      min-width: auto;
      width: 34rem;
      padding: 2.9rem 3rem;
      opacity: 1;
      visibility: hidden;
      transition: #{$right} 0.3s,
      visibility 0.3s;
      transform: none;
      overflow-x: hidden;
      overflow-y: scroll;

      .admin-bar & {
        padding-top: 6.1rem;
      }
    }

    .offcanvas-overlay {
      position: fixed;
      left: 0;
      width: 100vw;
      top: -10vh;
      height: 120vh;
      background: rgba(0, 0, 0, 0.3);
      z-index: 9998;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }

    .dropdown-box {
      z-index: 9999;
    }

    &.opened {
      .dropdown-box {
        visibility: visible;
        #{$right}: 0;
      }

      .offcanvas-overlay {
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

// 2-2. Mobile Menu Toggler
.mobile-menu-toggle {
  --alpha-mmenu-toggle-size: 27px;
  --alpha-mmenu-toggle-color: var(--alpha-change-color-dark-1);
  --alpha-mmenu-toggle-hover-color: var(--alpha-primary-color);

  display: block;
  line-height: 1;
  color: var(--alpha-mmenu-toggle-color);
  transition: color 0.3s, background-color 0.3s;

  &.direction-top {
    overflow: hidden;
  }

  i {
    font-size: var(--alpha-mmenu-toggle-size);
  }

  &:hover {
    color: var(--alpha-mmenu-toggle-hover-color);
  }
}

@include mq(lg) {
  .elementor-widget-#{$theme-name}_header_mmenu_toggle {
    display: none !important;
  }
}

// 2-3. Logo
.logo {
  display: block;
}

.site-logo {
  width: 100%;
}

.site-sticky-logo {
  display: none;
}

.site-sticky-logo,
.site-sticky-logo~.site-logo {
  transition: opacity .3s, transform .3s;
}

.sticky-content {
  .site-sticky-logo {
    display: block;
  }

  &:not(.fixed) .site-sticky-logo {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transform: translateX(if-ltr(30px, -30px));
  }
}

.fixed {

  .site-sticky-logo~.site-logo {
    position: absolute;
    top: -9999px;
    opacity: 0;
    transform: translateY(if-ltr(-30px, 30px));
  }
}

@include mq(md) {
  .site-mobile-logo {
    position: absolute;
    top: -9999px;
  }
}

@include mq(md, max) {
  .site-logo:not(:last-child) {
    display: none;
  }

  .site-mobile-logo {
    display: block;
  }
}

// 2-4. Account
header {

  .account i,
  .offcanvas-open i {
    font-size: 1.9286em;
  }

  .offcanvas-open {
    display: flex;
    align-items: center;
  }
}

header .block-type {
  flex-direction: column;

  i+span {
    margin: 3px 0 0;
  }
}

@include mq(lg, max) {
  .header {

    .account .block-type i {
      margin-bottom: 0;
    }
  }
}

.account,
.login {
  display: flex;
  align-items: center;
}

.login,
.offcanvas-open.inline-type {

  i+span,
  span+i {
    margin-#{$left}: 9px;
  }
}

.account .login,
.account .register,
.offcanvas-open {
  &:hover {
    color: var(--alpha-primary-color);
  }
}

.account {
  .delimiter {
    color: var(--alpha-grey-color-light);
    margin: 0 0.2143em;
  }

  .links {
    display: flex;
    align-items: center;
  }

  &.block-type {
    display: block;

    &:not(.dropdown),
    >a {
      text-align: center;
    }

    .links {
      margin-top: 3px;
      line-height: 1.2;
    }
  }
}

.account-dropdown {

  >a::after {
    content: none;
  }

  a {
    line-height: 1.2;
  }

  .menu {
    >ul>li>a {
      padding: 0.4286em 0.71486em;
      border: 0;
    }

    ul {
      padding: 0;
    }
  }

  .dropdown-box {
    padding: .5rem 0;
    width: auto;
    border-radius: var(--alpha-border-radius);

    ul.menu {
      >li {
        padding: 0;
        border: 0;
      }
    }

    a {
      font-weight: 400;
    }
  }

  a.block-type:after {
    display: none;
  }
}

.account-avatar {
  width: 4rem;
  height: 4rem;
  background: var(--alpha-change-border-color-light);
  border-radius: 50%;
  overflow: hidden;

  .inline-type & {
    margin-#{$right}: 1rem;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 2-5. Language & Currency Switcher
.menu.switcher {
  i {
    display: none;
  }

  li.active>a,
  li:hover>a {
    color: var(--alpha-primary-color);
  }

  li a {
    padding: 6px 10px;
    line-height: 1.1;
  }

  >li>a {
    padding: 9px 0;

    &::after {
      margin-bottom: 1.5px;
    }
  }

  ul {
    #{$left}: auto;
    #{$right}: 0;
    min-width: 0;
    padding: 0.5rem 0;

    li {
      padding: 0;
    }

    a {
      color: var(--alpha-body-color);
    }
  }

  img {
    margin-#{$right}: 4px;
  }
}

.elementor .switcher-toggle::after {
  font-size: 0.7em;
}

// 2-6. Welcome Message
@include mq(xs, max) {
  .welcome-msg {
    white-space: nowrap;
    transform: translateX(0);
    animation: 6s linear 2s 1 show_msg_first, 12s linear 8s infinite show_msg;
  }
}

@keyframes show_msg_first {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(if-ltr(-100%, 100%));
  }
}

@keyframes show_msg {
  from {
    transform: translateX(if-ltr(100%, -100%));
  }

  to {
    transform: translateX(if-ltr(-100%, 100%));
  }
}