////
/// Buttons-group Module
/// @group button
////

#{ns-group(btns)} {
  @include disable-list-style;
  @include display-flex(null, stretch, null, wrap);
  @include vertical-btns-group;
  @include margin-x(-2v);

  /**
  * fr-btns-group--inline : aligne les boutons horizontalement dans tout les cas
  * fr-btns-group--inline-(sm/md/lg) : permet de passer en horizontal à partir de la valeur du breakpoint appliqué (sm, md, lg)
  */
  &--inline {
    @include horizontal-btns-group;

    &#{ns-group(btns)}--right {
      &#{ns-group(btns)}--inline-reverse {
        flex-direction: row-reverse;
        justify-content: flex-start;
      }
    }

    &-sm {
      @include respond-from(sm) {
        @include horizontal-btns-group;

        &#{ns-group(btns)}--right {
          &#{ns-group(btns)}--inline-reverse {
            flex-direction: row-reverse;
            justify-content: flex-start;
          }
        }
      }
    }

    &-md {
      @include respond-from(md) {
        @include horizontal-btns-group;

        &#{ns-group(btns)}--right {
          &#{ns-group(btns)}--inline-reverse {
            flex-direction: row-reverse;
            justify-content: flex-start;
          }
        }
      }
    }

    &-lg {
      @include respond-from(lg) {
        @include horizontal-btns-group;

        &#{ns-group(btns)}--right {
          &#{ns-group(btns)}--inline-reverse {
            flex-direction: row-reverse;
            justify-content: flex-start;
          }
        }
      }
    }
  }

  /**
  * fr-btns-group--left : (Défaut) aligne les boutons sur la gauche (en lecture L-t-R)
  */
  &--left {
    &,
    li {
      justify-content: flex-start;
      text-align: left;
    }
  }

  /**
  * fr-btns-group--right : aligne les boutons sur la droite
  */
  &--right {
    &,
    li {
      justify-content: flex-end;
      text-align: right;
    }
  }

  /**
  * fr-btns-group--center : aligne les boutons au centre du conteneur
  */
  &--center {
    &,
    li {
      justify-content: center;
      text-align: center;
    }
  }

  /**
  * fr-btns-group--center : aligne les boutons au centre du conteneur
  */
  &--between {
    &,
    li {
      justify-content: space-between;
      text-align: center;
    }
  }

  /**
  * fr-btns-group--equisized : Fixe la largeur des boutons à celle du plus grand. Géré en grande partie en JS.
  */
  &--equisized {
    --equisized-width: auto;

    #{ns(btn)} {
      justify-content: center;
      width: var(--equisized-width);
    }
  }

  /**
  * fr-btns-group--sm : Fixe les boutons à la taille SM
  */
  &--sm {
    #{ns(btn)} {
      @include has-not-icon {
        @include nest-btn(sm, false, null, null, false);
      }
    }

    @include class-not-start-with(#{ns(btns-group--icon-, '')}) {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(sm, only, null, null, false);
          justify-content: flex-start;
        }
      }
    }

    &#{ns-group(btns)}--icon-left {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(sm, left, null, null, false);
        }
      }
    }

    &#{ns-group(btns)}--icon-right {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(sm, right, null, null, false);
        }
      }
    }
  }

  /**
  * fr-btns-group--md : (défaut) Fixe les boutons à la taille MD
  */
  &:not(#{ns-group(btns)}--sm):not(#{ns-group(btns)}--lg) {
    #{ns(btn)} {
      @include has-not-icon {
        @include nest-btn(md, false, null, null, false);
      }
    }

    @include class-not-start-with(#{ns(btns-group--icon-, '')}) {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(md, only, null, null, false);
          justify-content: flex-start;
        }
      }
    }

    &#{ns-group(btns)}--icon-left {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(md, left, null, null, false);
        }
      }
    }

    &#{ns-group(btns)}--icon-right {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(md, right, null, null, false);
        }
      }
    }
  }

  /**
  * fr-btns-group--lg : Fixe les boutons à la taille LG (sans modfifieur => MD)
  */
  &--lg {
    #{ns(btn)} {
      @include has-not-icon {
        @include nest-btn(lg, false, null, null, false);
      }
    }

    @include class-not-start-with(#{ns(btns-group--icon-, '')}) {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(lg, only, null, null, false);
          justify-content: flex-start;
        }
      }
    }

    &#{ns-group(btns)}--icon-left {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(lg, left, null, null, false);
        }
      }
    }

    &#{ns-group(btns)}--icon-right {
      #{ns(btn)} {
        @include has-icon {
          @include nest-btn(lg, right, null, null, false);
        }
      }
    }
  }

  #{ns(fieldset__element)} > & {
    @include margin-bottom(-4v);
  }
}