@use '../compiled/tokens/scss/breakpoint';
@use '../compiled/tokens/scss/size';
@use '../mixins/fluid';

/// Fluid Spacing Mixins
/// Used by Container and similar items to apply a consistent fluid
/// amount of padding and margins.
$fluid-spacing-breakpoint-min: breakpoint.$s;
$fluid-spacing-breakpoint-max: breakpoint.$xl;
$fluid-spacing-block-min: size.$padding-container-vertical-min;
$fluid-spacing-block-max: size.$padding-container-vertical-max;
$fluid-spacing-inline-min: size.$padding-container-horizontal-min;
$fluid-spacing-inline-max: size.$padding-container-horizontal-max;
$fluid-spacing-block: fluid.fluid-clamp(
  $fluid-spacing-block-min,
  $fluid-spacing-block-max,
  $fluid-spacing-breakpoint-min,
  $fluid-spacing-breakpoint-max
);
$fluid-spacing-block-negative: fluid.fluid-clamp(
  $fluid-spacing-block-min * -1,
  $fluid-spacing-block-max * -1,
  $fluid-spacing-breakpoint-min,
  $fluid-spacing-breakpoint-max
);
$fluid-spacing-block-negative-overlap: fluid.fluid-clamp(
  $fluid-spacing-block-min * -1.25,
  $fluid-spacing-block-max * -1.25,
  $fluid-spacing-breakpoint-min,
  $fluid-spacing-breakpoint-max
);
$fluid-spacing-block-negative-overlap-partial: fluid.fluid-clamp(
  $fluid-spacing-block-min * -0.5,
  $fluid-spacing-block-max * -0.5,
  $fluid-spacing-breakpoint-min,
  $fluid-spacing-breakpoint-max
);
$fluid-spacing-inline: fluid.fluid-clamp(
  $fluid-spacing-inline-min,
  $fluid-spacing-inline-max,
  $fluid-spacing-breakpoint-min,
  $fluid-spacing-breakpoint-max
);
$fluid-spacing-inline-negative: fluid.fluid-clamp(
  $fluid-spacing-inline-min * -1,
  $fluid-spacing-inline-max * -1,
  $fluid-spacing-breakpoint-min,
  $fluid-spacing-breakpoint-max
);
$fluid-gap: fluid.fluid-clamp(
  size.$spacing-gap-fluid-min,
  size.$spacing-gap-fluid-max,
  $fluid-spacing-breakpoint-min,
  $fluid-spacing-breakpoint-max
);

@mixin fluid-padding-block($factor: 1) {
  padding-block: fluid.fluid-clamp(
    $fluid-spacing-block-min * $factor,
    $fluid-spacing-block-max * $factor,
    $fluid-spacing-breakpoint-min,
    $fluid-spacing-breakpoint-max
  );
}

@mixin fluid-padding-inline($factor: 1) {
  padding-inline: fluid.fluid-clamp(
    $fluid-spacing-inline-min * $factor,
    $fluid-spacing-inline-max * $factor,
    $fluid-spacing-breakpoint-min,
    $fluid-spacing-breakpoint-max
  );
}

@mixin fluid-margin-inline-negative() {
  margin-inline: $fluid-spacing-inline-negative;
}

/// Applies styles for a vertical rhythm layout object. Used by the `o-rhythm`
/// pattern and for relevant Gutenberg blocks. Makes heavy use of Heydon
/// Pickering's "lobotomized owl" selectors: By adding `margin-top` to adjacent
/// elements, we avoid impacting the layout of the container itself (which would
/// complicate alignment of adjacent columns).
/// @link https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
/// @param {Number} $space - The default space between.
@mixin vertical-rhythm($space: size.$rhythm-default) {
  > * + * {
    margin-block-start: $space;

    // Allow space to be overridden using custom properties
    margin-block-start: var(--rhythm);
  }

  // Where custom properties are supported, also allow headings to receive their
  // own rhythm. Note that we also apply this selector to classes containing
  // `heading`, which covers cases like the `c-heading` component or element
  // classes like `{component-name}__heading`. This encourages developers to
  // use semantic markup for headings without worrying about compatibility with
  // rhythm helpers.
  @supports (--custom: properties) {
    > * + h1,
    > * + h2,
    > * + h3,
    > * + h4,
    > * + h5,
    > * + h6,
    > * + [class*='heading'] {
      margin-block-start: var(--rhythm-headings, var(--rhythm));
    }
  }
}

@mixin fluid-vertical-rhythm($headings: false) {
  @if $headings {
    --rhythm-headings: #{$fluid-spacing-block};
  } @else {
    --rhythm: #{$fluid-spacing-block};
  }
}