@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'scss/variables' as *;

.sky-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // Default to large gutters for backwards compatibility.
  // (Prior versions of fluid-grid did not require the wrapping `sky-fluid-grid` component.)
  margin-left: -(map-get($gutter-sizes, large));
  margin-right: -(map-get($gutter-sizes, large));
}

@mixin create_row_gutters($gutter-size) {
  :host-context(.sky-fluid-grid-gutter-size-#{$gutter-size}) {
    .sky-row {
      margin-left: -(map-get($gutter-sizes, $gutter-size));
      margin-right: -(map-get($gutter-sizes, $gutter-size));
    }
  }
  :host-context(
      .sky-fluid-grid-gutter-size-#{$gutter-size}.sky-fluid-grid-no-margin
    ) {
    .sky-row {
      margin-left: -(map-get($gutter-sizes, $gutter-size)) * 2;
      margin-right: -(map-get($gutter-sizes, $gutter-size)) * 2;
    }
  }
}

@mixin create_row_gutters_modern($gutter-size) {
  /* clean-css ignore:start */
  :host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-#{$gutter-size}) {
    .sky-row {
      margin-left: -(map-get($gutter-sizes-modern, $gutter-size));
      margin-right: -(map-get($gutter-sizes-modern, $gutter-size));
    }
  }
  :host-context(
      .sky-theme-modern
        .sky-fluid-grid-gutter-size-#{$gutter-size}.sky-fluid-grid-no-margin
    ) {
    .sky-row {
      margin-left: -(map-get($gutter-sizes-modern, $gutter-size)) * 2;
      margin-right: -(map-get($gutter-sizes-modern, $gutter-size)) * 2;
    }
  }
  /* clean-css ignore:end */
}

@include create_row_gutters(small);
@include create_row_gutters(medium);
@include create_row_gutters(large);

@include create_row_gutters_modern(small);
@include create_row_gutters_modern(medium);
@include create_row_gutters_modern(large);

@include mixins.sky-host-responsive-container-xs-min() {
  .sky-row.sky-row-reverse {
    flex-direction: row;
  }
}

@include mixins.sky-host-responsive-container-sm-min() {
  .sky-row.sky-row-reverse {
    flex-direction: row-reverse;
  }
}

@include mixins.sky-theme-modern {
  .sky-row {
    // Default to large gutters for backwards compatibility.
    // (Prior versions of fluid-grid did not require the wrapping `sky-fluid-grid` component.)
    margin-left: -(map-get($gutter-sizes-modern, large));
    margin-right: -(map-get($gutter-sizes-modern, large));
  }
}
