@use 'sass:list';

// Pseudo Elements
// ===============

/// # Pseudo-Elements
///
/// Some shortcuts for creating `::before` and `::after` pseudo-elements.
///
/// @group type-pseudo

// Before
// ------
/// Add generated content `:before` an element.
///
/// @since 4.0.0 -
/// - NEW: The default value for `$content` is an empty string
/// @group type-pseudo
/// @param {String} $content [''] -
///   A value for the `content` property.
@mixin before($content: '') {
  &::before {
    content: $content;
    @content;
  }
}

// After
// -----
/// Add generated content `:after` an element.
///
/// @since 4.0.0 -
/// - NEW: The default value for `$content` is an empty string
/// @group type-pseudo
/// @param {String} $content [''] -
///   A value for the `content` property.
@mixin after($content: '') {
  &::after {
    content: $content;
    @content;
  }
}

// Wrap Content
// ------------
/// Add generated content `:before` and `:after` an element.
/// @group type-pseudo
/// @param {List} $content -
///   One or two values to be used for the `content` property.
///   A single string will be used `:before` and `:after`.
@mixin wrap-content($content: '“' '”') {
  $_before: list.nth($content, 1);

  &::before,
  &::after {
    content: $_before;
    @content;
  }

  @if list.length($content) > 1 {
    &::after {
      content: list.nth($content, 2);
    }
  }
}