@use 'sass:color';
@import 'settings';

@mixin vf-u-baseline-grid {
  $baseline-color: #f00 !default;
  $baseline-offset: 0 !default;
  $baseline-size: $sp-unit !default;

  .u-baseline-grid {
    position: relative;

    &::after {
      background: linear-gradient(to top, color.scale($baseline-color, $alpha: -85%), color.scale($baseline-color, $alpha: -85%) 1px, transparent 1px, transparent);
      background-size: 100% $baseline-size;
      bottom: 0;
      content: '';
      display: block;
      left: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: $baseline-offset;
      z-index: 200;
    }
  }

  // baseline grid on document should be in the background
  // stylelint-disable selector-max-type -- needed for examples
  html.u-baseline-grid {
    background-color: color.scale($baseline-color, $alpha: -95%);
    position: static;

    &::after {
      z-index: -1;
    }
  }
  // stylelint-enable selector-max-type
}