@use "../../Container/styles/mixins" as container;
@use "../../Accordion/styles/mixins" as accordion;
@use "../../../styles/typography/mixins" as typography;

@use "./mixins";
@use "./config";

// Modifiers global states and resets
#{config.$class-root} {
  @include mixins.globals;
}

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

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

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

  &__nav {
    @include mixins.nav;

    &-item {
      @include mixins.nav-item;

      &--lead {
        @include mixins.nav-item-lead;
      }
    }

    &--vertical {
      @include mixins.nav-vertical;
    }

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

    &--mobile-locale {
      @include mixins.nav-mobile-locale;
    }

    &-dropdown {
      @include mixins.nav-dropdown;

      &.is-visible {
        opacity: 1;
      }
    }

    &-logo {
      @include mixins.nav-logo;
    }

    &-link {
      @include mixins.nav-link;

      &--locale {
        @include mixins.nav-link-locale;
      }

      &--no-line {
        @include mixins.nav-link-no-line;
      }
    }

    &-cart-icon {
      @include mixins.nav-cart-icon;
    }

    &-button {
      @include mixins.nav-button;

      &--indicator {
        @include mixins.nav-button-indicator;
      }
    }

    &-icon {
      @include mixins.nav-icon;

      &--no-gap-md-down {
        @include mixins.nav-icon-no-gap-md-down;
      }
    }

    &-spacer {
      @include mixins.nav-spacer;
    }
  }

  &__subnav {
    @include mixins.subnav;

    &-item {
      @include mixins.subnav-item;
    }
  }

  &__divider {
    @include mixins.divider;
  }

  &__top {
    @include mixins.top;
  }

  &__main {
    @include mixins.main;
  }

  &__submain {
    @include mixins.submain;
  }

  &__mobile {
    @include mixins.mobile;

    &-overlay {
      @include mixins.mobile-overlay;
    }

    &-wrapper {
      @include mixins.mobile-wrapper;
    }

    &-header {
      @include mixins.mobile-header;
    }

    &-body {
      @include mixins.mobile-body;
    }

    &-account {
      @include mixins.mobile-account;

      &-avatar {
        @include mixins.mobile-account-avatar;
      }

      &-name {
        @include mixins.mobile-account-name;
      }

      &-phone {
        @include mixins.mobile-account-phone;
      }

      &-logout {
        @include mixins.mobile-account-logout;
      }

      &-cta {
        @include mixins.mobile-account-cta;
      }

      &-links {
        @include mixins.mobile-account-links;
      }

      &-link {
        @include mixins.mobile-account-link;
      }
    }
  }

  &__container {
    @include mixins.container;
  }

  &__grid {
    @include mixins.grid;
  }

  &__card {
    @include mixins.card;
  }

  &__text--large {
    @include mixins.text-large;
  }

  &__caption {
    @include mixins.caption;

    &--large {
      @include mixins.caption-large;
    }
  }

  &-icon {
    @include mixins.icon;
  }

  &__overlay {
    @include mixins.overlay;
  }

  &-spacer {
    @include mixins.spacer;

    &--small {
      @include mixins.spacer-small;
    }
  }

  &__accordion {
    @include mixins.accordion;
  }

  &__accordion-item {
    @include mixins.accordion-item();
  }

  &__accordion-header {
    @include accordion.header;
  }

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

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

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

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

  &__input {
    @include mixins.input;
  }

  &__input-wrapper {
    @include mixins.input-wrapper;
  }

  &__tag {
    @include mixins.tag;

    &--orange {
      @include mixins.tag-orange;
    }

    &--transparent {
      @include mixins.tag-transparent;
    }
  }

  &__list--inline {
    @include typography.list-inline;
  }

  &__list--gap-small {
    @include mixins.list-gap-small;
  }

  &--hide-md-down {
    @include mixins.hide-md-down;
  }

  &--hide-lg-up {
    @include mixins.hide-lg-up;
  }

  &--align-center {
    text-align: center !important;
  }
}
