@use 'sass:math';
@use 'sass:meta';
@use '../../../compiled/tokens/scss/color-base';
@use '../../../compiled/tokens/scss/size';
@use '../../../mixins/border-radius';
@use '../../../mixins/fluid';
@use '../../../mixins/font-size';
@use '../../../mixins/headings';
@use '../../../mixins/ms';
@use '../../../mixins/spacing';

// These utility classes may apply to anything created within the Gutenberg
// editor (but not necessarily Gutenberg blocks).

/// Releases a full-width child element from its limited-width container.
/// @link https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#flipping-the-script
.alignfull {
  margin-inline: calc(-50vw + 50%);
}

/// Wide alignment should max out at our default container width.
.alignwide {
  margin-inline: max(
    -50vw + 50%,
    math.div(size.$max-width-spread - size.$max-width-prose, -2)
  );
}

/// When a custom background color is applied, we round the corners of the
/// element unless the element has alignment that will cause it to meet the
/// viewport edge.
.has-background {
  @include border-radius.conditional;

  /// Set inline margins unless the element's alignment has been set.
  &:not(.alignfull):not(.alignwide):not(.aligncenter) {
    @include spacing.fluid-margin-inline-negative;
  }
}

/// Apply consistent padding to certain patterns and elements with a background.
/// Some of these violate our selector rules to overcome WordPress's default
/// styles. Some of these used to be located in our Core Block CSS, but once I
/// discovered that `p.has-background` had styles I needed to override, it made
/// me queasy to manage these styles in three separate places.
///
/// 1. Default padding is consistent with block rhythm on both edges…
/// 2. …but if the alignment is not center, we use fluid inline padding instead
///    so that the inner content will align with its siblings.
p,
.wp-block-details,
.wp-block-group,
.wp-block-media-text,
.wp-block-quote {
  &.has-background {
    padding: size.$rhythm-default; // 1

    &:not(.aligncenter) {
      @include spacing.fluid-padding-inline; // 2
    }
  }
}

/// Utilities for Block Color Palettes
/// @link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-color-palettes

$color-map: meta.module-variables('color-base');

@each $name, $value in $color-map {
  .has-#{$name}-background-color {
    background-color: $value;
  }

  .has-#{$name}-color {
    color: $value;
  }
}

/// Utilities for Block Font Sizes
/// @link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-font-sizes

.has-big-font-size {
  @include font-size.big;
}

/// We need to use `!important` because otherwise WordPress will override this
/// size as of version 5.9. We could get around this by setting the font size
/// via `theme.json`, but that would make this an outlier among our other sizes,
/// so for now we'll just use `!important`.
///
/// @link https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/

.has-small-font-size {
  @include font-size.small($important: true);
}

@for $level from -2 through 3 {
  // WordPress treats numbers as separate segments in slugs, so we must add an
  // extra dash to negative number class segment prefixes
  $level-segment: ms.step-class-segment($level, 'n-');

  .has-heading-#{$level-segment}-font-size {
    @include headings.level($level, false);
  }
}

// Use logical properties for text alignment

.has-text-align-left {
  text-align: start;
}

.has-text-align-right {
  text-align: end;
}