@use "./../variables" as *;

@mixin make-group() {
  margin: 0;
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  justify-content: flex-start;
  position: relative;

  // $group-margin-fallback: if(sass($enable-margins): var(--spacer); else: 0);
  $group-margin-fallback: if(
    sass($enable-margins): var(--spacer) ; else: 0
  );

  margin-bottom: var(--group-margin-bottom, #{$group-margin-fallback});
}

@mixin make-group-column($gap: calc(var(--spacer) * 0.5)) {
  @include make-group;

  align-items: stretch;
  flex-direction: column;
  gap: $gap;
}

@mixin make-group-row($gap: calc(var(--spacer) * 0.5)) {
  @include make-group;

  gap: $gap;
}

@mixin make-grouped-column() {
  gap: 0;

  & > * {
    &:not(:last-child) {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      margin-bottom: 0;
    }

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      margin-top: -1px;
    }
  }
}

@mixin make-grouped-row($element: false) {
  // $selector: if($element, $element, "*");
  $selector: if(
    sass($element): $element; else: "*"
  );

  flex-wrap: nowrap;
  gap: 0;

  & > #{$selector} {
    &:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      margin-right: -1px;
    }

    &:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}