@use "../../Container/styles/mixins" as container;
@use "../../Accordion/styles/mixins" as accordion;
@use "../../Tile/styles/mixins" as tile;
@use "../../../styles/typography/mixins" as typography;
@use "../../../styles/tools/convert";

@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;
      }

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

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

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

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

    &--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;
      }

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

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

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

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

      &--select {
        @include mixins.nav-select-wrapper;
      }
    }

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

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

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

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

  &__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;
    }

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

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

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

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

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

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

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

    &-app-card {
      @include mixins.mobile-app-card;

      &-section {
        @include mixins.mobile-app-card-section;
      }

      &-title {
        @include mixins.mobile-app-card-title;
      }

      &-stores {
        @include mixins.mobile-app-card-stores;
      }

      &-store {
        @include mixins.mobile-app-card-store;
      }

      &-image {
        @include mixins.mobile-app-card-image;
      }
    }
  }

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

    &--secondary {
      @include mixins.mobile-account-button-secondary;
      margin-bottom: 0;
    }
  }

  &__container {
    @include mixins.container;

    &#{config.$class-root}__top-content {
      @include mixins.top-content;
    }
  }

  &__grid {
    @include mixins.grid;
  }

  &__card {
    @include mixins.card;
  }

  &__tiles {
    @include mixins.tiles;
  }

  &__tile {
    @include tile.tile-base;
    @include mixins.tile;

    &-body {
      display: flex;
      @include tile.tile-body-compact;
      @include tile.tile-body-icon-ratio;
      flex-direction: row;
      justify-content: flex-start;
      background-color: var(--color-background-primary);
    }

    &-content {
      @include mixins.tile-content;
    }

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
      color: var(--color-text-default) !important;
      border-color: var(--color-border-accent);
      outline: 2px solid var(--color-border-accent);
      outline-offset: -2px;
    }
  }

  &__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-only {
    @include mixins.hide-lg-only;
  }

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

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