// Mixins: Layout

@use '../functions' as *;
@use 'breakpoint' as *;

@mixin layout-align-inline-end($margin) {
  float: inline-end;

  @if $margin {
    margin-inline-start: $margin;
  }
}

@mixin layout-align-inline-start($margin) {
  float: inline-start;

  @if $margin {
    margin-inline-end: $margin;
  }
}

@mixin layout-align-left($margin) {
  float: left;

  @if $margin {
    margin-right: $margin;
  }
}

@mixin layout-align-right($margin) {
  float: right;

  @if $margin {
    margin-left: $margin;
  }
}

@mixin layout-align-none {
  float: none;
  margin-inline: 0;
}

@mixin layout-constrain(
  $max-width: gesso-constrain(md),
  $margins-mobile: gesso-site-margins(mobile),
  $margins: gesso-site-margins(desktop)
) {
  margin-inline: auto;
  max-width: rem($max-width);
  width: 100%;

  @if $margins-mobile {
    padding-inline: rem($margins-mobile);
  }

  @if $margins {
    @include breakpoint(gesso-breakpoint(desktop)) {
      padding-inline: rem($margins);
    }
  }

  // Just in case .l-constrain is nested within another .l-constrain.
  & & {
    padding-inline: 0;
  }
}

// Breaks something outside its parent l-constrain or other centered container
// and makes it flush with the edge of the viewport.
@mixin layout-full-bleed() {
  inset-inline: 50%;
  margin-inline: calc(-50vw + var(--gesso-scrollbar-width) / 2);
  position: relative;
  width: calc(100vw - var(--gesso-scrollbar-width));
}

// Reverses the above.
@mixin layout-undo-full-bleed() {
  inset-inline: auto;
  margin-inline: 0;
  position: static;
  width: auto;
}
