@use '../base/variable' as v;
@use '../base/token';
@use '../abstract';
@use '../sprite';

$mobile-rolling-banner-height: 80px;
$mobile-header-height: 60px;

.cds-header {
  $this: &;
  $user-area-height: 152px;

  @include abstract.fixed($top: 0, $left: 0);

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline-start: 16px;
  padding-inline-end: 12px;
  width: 100%;
  height: $mobile-header-height;
  background-color: var(--base-white);
  z-index: 1000; // 서비스 z index:999로 인해 올림
  box-shadow: var(--shadow-xs);
  color: var(--gray-700);

  &__logo {
    flex: none;

    img {
      width: 100px;
      vertical-align: top;
    }
  }

  :where(&.is-active)::before {
    @include abstract.absolute($top: calc(100% - 2px), $left: 0);
    content: '';
    width: 100%;
    height: 2px;
    box-shadow: var(--shadow-xs);
    z-index: 5;
  }

  &__collapse-wrap {
    $height: $user-area-height + $mobile-rolling-banner-height;

    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    top: 60px;
    border-top: 1px solid rgba(16, 24, 40, 0.05);

    &.is-active .cds-header__collapse {
      display: flex;
      flex-direction: column;
    }

    &.is-login-in .cds-header__gnb {
      max-height: calc(100% - $height);
    }

    & .cds-header__before-login {
      position: fixed;
      bottom: 0;
      width: calc(100% - 32px);
      background-color: #fff;
      left: 16px;
    }
  }
  // gnb, user menu, login, free start button 묶음
  // 반응형은 header에서 처리
  // =========================================================
  &__collapse {
    @include abstract.absolute($top: 0, $left: 0);

    display: none;
    width: 100%;
    height: calc(100vh - $mobile-header-height);
    background-color: var(--base-white);

    /* :where(#{$this}.is-active) & {
      display: flex;
      flex-direction: column;
    } */
  }

  // gnb
  // =========================================================
  &__gnb {
    $height: $user-area-height + $mobile-header-height; // user menu height +  header mobile height

    padding-block: 24px;
    overflow-y: auto;
    max-height: calc(100% - 92px);
    /* flex: 1; */

    .cds-nav-menu-item__link-top {
      margin-block-end: 0;
    }
  }

  // before login
  // =========================================================
  &__before-login {
    display: grid;
    align-items: flex-end;
    padding-block: 24px;
    // height: $user-area-height;
  }

  &__before-btn {
    width: 100%;
    margin-block-end: 12px;

    &:last-of-type {
      margin-block-end: 0;
    }
  }

  &__cta-btn {
    display: none;
  }

  // login 후 사용자 메뉴
  // =========================================================
  &__user-pc {
    // @include abstract.debug();
    display: none;
  }

  &__user-mo {
    display: grid;
    gap: 16px;
    padding-block: 24px;
    width: calc(100% - 32px);
    background-color: #fff;
    left: 16px;

    position: fixed;
    bottom: 0;

    &-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  &__actions-mo {
    display: flex;
    align-items: center;
  }

  &__cta-btn-mo {
    display: inline-flex;
    margin-right: 8px;
  }
}
// 전체 nav button
// =========================================================
.cds-whole-menu {
  display: none;
}

// hamburger, 전체 메뉴 닫기
// =====================
.cds-header__hamburger {
  // @include abstract.absolute($top: 16px, $right: 12px);

  svg {
    width: 24px;
    height: 24px;
    stroke: var(--gray-500);
  }
}

.cds-header--simple .cds-header__actions-mo {
  display: none;
}

@include abstract.media-bp-up('exl') {
  $height-header-pc: 72px;

  .cds-header {
    padding-inline: 32px;
    height: $height-header-pc;

    &__logo {
      img {
        width: 123px;
      }
    }

    :where(&.is-active)::before {
      content: none;
    }

    &__collapse,
    &__collapse.is-active {
      position: static;
      display: flex;
      flex-direction: initial;
      justify-content: space-between;
      align-items: center;
      padding-inline: 0;
      margin-inline-start: 24px;
    }

    // gnb
    // ================================
    &__gnb {
      padding-block: 0;
      height: auto;
      overflow-y: visible;
    }

    .cds-gnb__list {
      display: flex;
      align-items: center;
    }

    .cds-gnb__item {
      @include abstract.relative();

      height: 72px;
      padding-block: 14px;
      margin-block-start: 0;

      &:nth-child(n + 2) {
        margin-inline-start: 8px;
      }

      &.is-link {
        margin-inline-start: 4px;
      }

      &.is-link.is-main .cds-btn {
        font-weight: 500;
        padding-inline: 16px;
      }

      &.is-link.is-main:not(.is-link ~ .is-link) {
        margin-inline-start: 33px;
      }

      &.is-link.is-main:not(.is-link ~ .is-link)::before {
        content: '';
        position: absolute;
        top: calc(50% + 2px);
        left: -16px;
        display: block;
        width: 1px;
        height: 16px;
        background: var(--gray-200);
        transform: translateY(-50%);
      }

      &.is-active::after {
        $bar-height: 2px;
        --bar-position-y: calc(100% - #{$bar-height});

        @include abstract.absolute($top: var(--bar-position-y), $left: 0);

        content: '';
        width: 100%;
        height: $bar-height;
        background-color: var(--base-black);
      }
    }

    .cds-nav-dropdown {
      display: flex;
      justify-content: center;

      &__content {
        display: none;
        @include abstract.absolute($top: calc(100% - 8px), $left: 50%);

        z-index: 5;
        margin: 0;
        padding-inline: 12px;
        width: max-content;
        min-width: 174px;
        transform: translateX(-50%);
      }

      .cds-nav-menu-item {
        padding-inline: 12px;
        border-radius: 8px;
      }

      &.is-active .cds-nav-dropdown__content {
        top: calc(100% + 8px);
        display: block;
      }
    }

    .cds-gnb__item:hover .cds-nav-dropdown__content {
      display: block;
    }

    .cds-menu-button.is-shopby::after {
      @include abstract.bg2x-sprite();
      @include abstract.sprite2x(sprite.$ico-enterprise);

      content: '';
    }

    // login, free start
    // ================================
    &__before-login {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding-block: 0;
    }

    &__before-btn {
      width: auto;

      &:first-child {
        order: 1;
      }
    }

    &__cta-btn {
      display: inline-flex;
    }

    // 로그인 후 사용자 메뉴
    // ================================
    &__user-mo {
      display: none;
    }

    &__user-pc {
      display: flex;
      align-items: center;
      gap: 12px;

      .cds-profile {
        @include abstract.relative();
        display: flex;
        justify-content: center;

        .cds-nav-dropdown__content {
          padding: 16px 16px 12px;
          min-width: auto;
          line-height: 1;
        }

        li + li {
          margin-block-start: 16px;
        }

        .cds-nav-dropdown__manage-menu {
          padding-block-end: 12px;
          border-block-end: 1px solid var(--gray-100);
        }
      }
    }

    &__actions-mo {
      display: none;
    }
  }

  // 전체 메뉴 trigger
  // ================================
  .cds-whole-menu {
    margin-inline-start: 12px;
    display: inline-flex;
  }

  // header simple
  // ================================
  .cds-header--simple .cds-header__collapse {
    justify-content: flex-end;
  }
} // ex

// INFO: 임시 사용 툴팁
.gnb-info-tooltip {
  @include abstract.absolute($top: calc(100% + 11px));

  padding: 12px;
  width: 200px;
  background-color: var(--base-white);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  font-size: token.$font-size-1;
  line-height: calc(22 / 14);
  text-align: end;

  em {
    display: block;
    margin-block-end: 12px;
    text-align: start;
  }

  &::before {
    @include abstract.absolute($top: -6px, $left: 50%);

    content: '';
    width: 12px;
    height: 12px;
    border: 1px solid var(--gray-100);
    border-width: 1px 1px 0 0;
    background-color: var(--base-white);
    transform: translateX(-50%) rotate(-45deg);
  }

  :where(.cds-header__user-pc:not(.is-visible)) & {
    display: none;
  }

  @at-root :where(.cds-header__user-pc.is-visible) {
    box-shadow: 0 0 0 1px var(gray-200), var(--shadow-xs-focused-4px-gray-100);
    border-radius: 8px;
  }
}

@media (min-width: 1366px) {
  .cds-header__collapse-pc {
    height: initial;

    .cds-header__cta-btn {
      margin-block-end: 0;
    }
  }

  .cds-header__collapse-wrap {
    display: none;
  }
}

.with-rolling-banner {
  .cds-header,
  .cds-header__collapse-wrap,
  .cds-service-map {
    position: sticky;
  }
}

@include abstract.media-bp-down('exl') {
  .cds-gnb__item {
    @include abstract.relative();

    &.is-link.is-main:not(.is-link ~ .is-link) {
      margin-block-start: 16px;
    }

    &.is-link.is-main:not(.is-link ~ .is-link)::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      display: block;
      width: calc(100% - 32px);
      height: 1px;
      background: var(--gray-200);
      transform: translateX(-50%);
    }
  }
}