_wrap.scss

/**
 * ui-wrap
 *  Custom properties and styles with configuration.
 */

/**
 * Requires
 */
@use 'sass:meta';
@use 'abstract';
@use 'mixins';

/**
 * Component css class
 * @protected
 * @type {string} css class
 */
$class: 'ui-wrap' !default;

/**
 * Component no flex suffix
 * @protected
 * @type {string} class variant
 */
$no-flex: '--no-flex' !default;

/**
 * Component property prefix
 * @protected
 * @type {string} property name
 */
$props: 'ui-wrap-' !default;

/**
 * Config defaults
 * @private
 * @type {map}
 */
$-config: ();

/**
 * Props defaults
 * @private
 * @type {map}
 */
$-props: (
  wrap: wrap,
);

/**
 * Update component config options
 * @public
 * @param {map} $options - Map of config options
 * @output {void} - Only sets config options
 */
@mixin config($options) {
  $-config: abstract.config($options, $-config, true, false, 'ui-wrap.config::') !global;
}

/**
 * Generate required custom properties
 * @public
 * @param {null|map} $extend - Extend properties for output only
 * @output Adds components custom properties in current scope
 */
@mixin properties($extend: null) {
  $render: abstract.merge-optional($-props, $extend);
  @include mixins.properties($render, $props, '_at_', 'ui-wrap.properties::');
}

/**
 * Generate component styles
 * @public
 * @output Outputs configured component styles
 */
@mixin styles() {

  // Must have at least one defined style
  @if meta.type-of($-config) != map {
    @error 'You must define at least one wrap style using the config mixin';
  }

  .#{$class} {
    margin: auto;
    width: 100%;

    // Every wrapper by default is a flex unless when using .ui-wrap--no-flex
    &:not(.#{$class}#{$no-flex}) {
      display: flex;
      flex-wrap: var(--#{$props}wrap);
    }

    // Include BEM style states
    @include mixins.bem-style($-config);

    // Allow additional styles
    @if meta.content-exists() {
      @content;
    }
  }
}