@import "../../helpers";
.sf-mega-menu-column {
  --list-item-padding: var(--spacer-sm) var(--spacer-sm) var(--spacer-sm) var(--spacer-lg);
  --list-item-border-width: 0 0 1px 0;
  --menu-item-font-size: var(--font-size--sm);
  flex: 1;
  width: 100%;
  @include for-desktop {
    --list-item-border-width: 0;
    --list-item-padding: 0;
    --list-item-margin: var(--spacer-sm) 0;
    width: auto;
  }
  &__header {
    --menu-item-font-size: var(--font-size--base);
    --menu-item-font-weight: var(--font-weight--medium);
    --menu-item-text-transform: uppercase;
    display: var(--mega-menu-column-header-display, flex);
    padding: var(--mega-menu-column-header-padding, var(--spacer-sm));
    margin: var(--mega-menu-column-header-margin, 0);
    @include border(--mega-menu-column-header-border, 0 0 1px 0, solid, var(--c-light));
    @include for-desktop {
      --menu-item-font-weight: var(--font-weight--normal);
      padding: var(--mega-menu-column-header-padding, 0);
      margin: var(--mega-menu-column-header-margin, var(--spacer-sm) 0);
      border-width: var(--mega-menu-column-header-border-width, 0);
    }
  }
  &__content {
    position: var(--mega-menu-column-content-position, absolute);
    top: var(--mega-menu-column-content-top, 0);
    display: var(--mega-menu-column-content-display, none);
    width: 100%;
    transform: var(--mega-menu-column-content-transform, translateX(100%));
    @include for-desktop {
      display: var(--mega-menu-column-content-display, block);
      position: var(--mega-menu-column-content-position, static);
      transform: var(--mega-menu-column-content-transform, translateX(0));
    }
  }
  &--hide-header-on-mobile {
    @include for-mobile {
      --mega-menu-column-header-display: none;
    }
  }
  &--pined-content-on-mobile {
    @include for-mobile {
      --mega-menu-column-content-position: static;
      --mega-menu-column-content-transform: translateX(0);
      --mega-menu-column-content-display: block;
    }
  }
  &.is-active {
    --mega-menu-column-content-display: block;
  }
}
.sf-mega-menu {
  width: 100%;
  background: var(--mega-menu-background, var(--c-white));
  position: var(--mega-menu-position, static);
  height: var(--mega-menu-height, 100vh);
  @include for-desktop {
    --mega-menu-height: auto;
  }
  &__bar {
    display: var(--mega-menu-bar-display, flex);
    @include for-desktop {
      display: var(--mega-menu-bar-display, none);
    }
  }
  &__content {
    display: var(--mega-menu-content-display, flex);
    flex-direction: var(--mega-menu-content-flex-direction, column);
    justify-content: var(--mega-menu-content-justify-content, space-between);
    align-items: var(--mega-menu-content-align-items, flex-start);
    max-width: var(--mega-menu-content-width, 77.5rem);
    margin: var(--mega-menu-content-margin, auto);
    padding: var(--mega-menu-content-padding);
    transform: var(--mega-menu-content-transform);
    transition: transform 150ms ease-in-out;
    @include for-desktop {
      flex-direction:var(--mega-menu-content-flex-direction, row);
      padding: var(--mega-menu-content-padding, var(--spacer-xl) var(--spacer-sm));
    }
  }
  &__menu {
    display: var(--mega-menu-menu-display, flex);
    flex-direction: var(--mega-menu-menu-flex-direction, column);
    justify-content: var(--mega-menu-menu-justify-content, space-between);
    align-items: var(--mega-menu-menu-align-items, flex-start);
    flex: 1;
    width: 100%;
    overflow: hidden;
    @include for-desktop {
      flex-direction:var(--mega-menu-menu-flex-direction, row);
    }
  }
  // @deprecated will be removed in 1.0.0
  &__aside{
    flex: 1;
    width: 100%;
    &-header {
      --menu-item-font-size: var(--font-size--base);
      --menu-item-font-weight: var(--font-weight--medium);
      --menu-item-text-transform: uppercase;
      display: var(--mega-menu-column-header-display, flex);
      padding: var(--mega-menu-column-header-padding, var(--spacer-sm));
      margin: var(--mega-menu-column-header-margin, 0);
      @include border(--mega-menu-column-header-border, 0 0 1px 0, solid, var(--c-light));
      @include for-desktop {
        --menu-item-font-weight: var(--font-weight--bold);
        padding: var(--mega-menu-column-header-padding, 0);
        margin: var(--mega-menu-column-header-margin, var(--spacer-sm) 0);
        border-width: var(--mega-menu-column-header-border-width, 0);
      }
    }
  }
  &.is-active{
    --mega-menu-content-transform: translateX(-100%);
    @include for-desktop {
      --mega-menu-content-transform: translate(0);
    }
  }
  &.is-absolute{
    --mega-menu-position: absolute;
    top: var(--mega-menu-top, 100%);
    left: var(--mega-menu-left, 0);
  }
}