@use "./config";
@use "./mixins";
@use "../../../styles/tools/convert";
@use "../../../styles/tokens/breakpoint";
@use "../../Megamenu/styles/mixins" as megamenuMixins;

#{config.$class-root} {
  @include mixins.globals;
}

#{config.$class-root},
.is-light #{config.$class-root},
#{config.$class-root}.is-light {
  @include megamenuMixins.light-vars;
}

.is-dark #{config.$class-root},
#{config.$class-root}.is-dark {
  @include megamenuMixins.dark-vars;
}

#{config.$class-root} {
  @include mixins.base;

  &__container {
    @include mixins.container;
  }

  &__menu {
    @include mixins.menu;
  }

  &__menu-section {
    @include mixins.menu-section;
  }

  &__logo {
    @include mixins.logo;
  }

  &__title {
    @include mixins.title;
  }

  &__accordion-toggle {
    @include mixins.accordion-toggle;
  }

  &__accordion-icon {
    @include mixins.accordion-icon;
    transition: none;
  }

  &__divider {
    &--hide-xs-down {
      @include breakpoint.get("xs", "down") {
        display: none;
      }
    }
  }

  [data-footer-toggle][aria-expanded="false"] > &__accordion-icon {
    transform: rotate(0deg);
  }

  [data-footer-toggle][aria-expanded="true"] > &__accordion-icon {
    transform: rotate(180deg);
  }

  &__list {
    @include mixins.list;

    &--inline {
      @include mixins.list-inline;
      align-items: center;
    }

    &-break--sm-down {
      @include mixins.list-break-sm-down;
    }

    &--space-small {
      @include mixins.list-space-small;
    }

    &--stack-sm-down {
      @include mixins.list-stack-sm-down;
    }
  }

  &__menu-section > &__list {
    @include mixins.accordion-list;
  }

  &__list-item--lead {
    @include mixins.list-item-lead;
  }

  &__bar {
    @include mixins.bar;
  }

  &__bottom {
    @include mixins.bottom;
    @include mixins.bottom-copyright;
  }

  &--mb-xlarge {
    margin-bottom: convert.to-rem(60px);

    @include breakpoint.get("md", "down") {
      margin-bottom: convert.to-rem(30px);
    }
  }
}