@use '../base/token';
@use '../abstract';
@use '../sprite';

// .cds-header-nav,
.cds-nav-dropdown {
  $this: &;

  @include abstract.relative();

  :not(.is-open) ~ #{&}__menu {
    display: none;
  }

  &__toggle {
    position: relative;
    display: flex;
    width: 100%;
    height: 44px;
    justify-content: space-between;
    border-radius: 8px;

    &:hover {
      background-color: var(--gray-50);
    }
  } // link

  :where(&.is-active) > #{$this}__toggle > svg {
    transform: rotate(180deg);
  }

  // dropdown open 메뉴
  // ===================================================
  &__content {
    margin-block: 8px;
    padding-block: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    background: var(--base-white);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  } // content

  & > *:last-child {
    margin-block-end: 0;
  }
}

@include abstract.media-bp-down('exl') {
  .cds-nav-dropdown {
    &__toggle {
      padding: 10px 16px;
      color: var(--gray-700);

      &:hover {
        background-color: transparent;
      }
    }

    &__content {
      padding-block: 12px 16px;
      margin-inline: 12px;
    }
  }
}