@use 'sass:list';
@use 'sass:math';
@use 'sass:selector';
@use 'theme';

@mixin flow($space: 1em) {
  & > * + * {
    margin-block-start: $space;
  }
}

@mixin rainbowify-text($elem, $props...) {
  $colors-length: list.length(theme.$text-colors);

  @for $i from 1 through $colors-length {
    :nth-child(#{$colors-length}n + #{$i} of #{selector.parse($elem)}) {
      @each $prop in $props {
        @if $prop == --rainbow-text {
          --rainbow-text: #{list.nth(theme.$text-colors, $i)};
        } @else {
          #{$prop}: var(--rainbow-text, #{list.nth(theme.$text-colors, $i)});
        }
      }
    }
  }
}

@mixin link-style() {
  text-decoration: underline;
  cursor: pointer;

  &:hover, &:focus {
    text-decoration: wavy underline;
  }
}

// noinspection CssReplaceWithShorthandSafely
@mixin gradient-border($width: theme.$spacer-2xs) {
  border: $width solid;
  border-width: math.div($width, 2);
  border-image-source: theme.$gradient;
  border-image-slice: 1;
}
