////
/// @group graphic-text-group
/// Graphic Text Group layout component
////

@use "sass:map";
@use "sass:meta";
@use "sass:math";

@use "../selector";
@use "../utils";
@use "../element";
@use "../breakpoint";

// Used for function fallback
$-fallbacks: (
  "rule-border": (
    "function": meta.get-function("get-rule-style", false, "element"),
    "arguments": ("large",)
  ),
  "separator-border": (
    "function": meta.get-function("get-rule-style", false, "element"),
    "arguments": ("light",)
  )
);

/// Module Settings
/// @type Map
/// @prop {CssUnit} gap [1rem] The gap between graphic and text.
/// @prop {CssUnit} gap-compact [0.5rem] The smaller gap applied when the compact modifier is used.
/// @prop {List} margin [2em 0] Margin applied to the group.
/// @prop {CssUnit} graphic-width [3.5rem] The default safe width for the graphic.
/// @prop {Border} rule-border [true] The border style for the rules.
/// @prop {CssUnit} rule-padding [1rem] The padding applied when using rules.
/// @prop {String} wrap-breakpoint ["small"] The breakpoint name at which the layout wraps to a column.
/// @prop {Border} separator-border [true] The border style for the separator between graphic and text.
/// @prop {CssUnit} separator-gap [0.5rem] The gap when the separator modifier is used (typically smaller since there are two gaps around the separator).

$config: (
  "gap" : 1rem,
  "gap-compact" : 0.5rem,
  "margin" : (2em 0),
  "graphic-width" : 3.5rem,
  "rule-border" : true,
  "rule-padding" : 1rem,
  "wrap-breakpoint" : "small",
  "separator-border" : true,
  "separator-gap" : 0.8rem,
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-graphic-text-group-set(( "property" : value ));

@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

/// Get a config option
/// @param {Map} $name Name of property
/// @example scss
///   @include ulu.component-graphic-text-group-get("property");

@function get($name) {
  $value: utils.require-map-get($config, $name, "graphic-text-group [config]");
  @return utils.function-fallback($name, $value, $-fallbacks);
}

/// Prints component styles
/// @demo graphic-text-group
/// @example scss
///  @include ulu.component-graphic-text-group-styles();

@mixin styles {
  $prefix: selector.class("graphic-text-group");

  #{ $prefix } {
    display: flex;
    align-items: center;
    text-align: left;
    gap: get("gap");
    margin: get("margin");
  }

  #{ $prefix }__graphic {
    flex-shrink: 0;
    width: get("graphic-width");
    display: flex;
    align-items: center;
    justify-content: center;
    order: 1;

    img, svg {
      margin: 0;
    }
  }

  #{ $prefix }__text {
    flex-grow: 1;
    min-width: 0;
    order: 3;
  }

  // Separator Modifier
  #{ $prefix }--separator {
    gap: get("separator-gap");
    &::before {
      content: "";
      display: block;
      order: 2;
      align-self: stretch;
      border-left: get("separator-border");
    }
    &#{ $prefix }--top,
    &#{ $prefix }--bottom {
      &::before {
        border-left: none;
        border-bottom: get("separator-border");
      }
    }
  }

  // Responsive Modifiers
  #{ $prefix }--wrap {
    @include breakpoint.max(get("wrap-breakpoint")) {
      flex-direction: column;
      align-items: flex-start;
      &#{ $prefix }--separator::before {
        border-left: none;
        border-bottom: get("separator-border");
      }
    }
  }

  // Alignment Modifiers
  #{ $prefix }--align-start {
    align-items: flex-start;
  }

  #{ $prefix }--align-baseline {
    align-items: baseline;
  }

  #{ $prefix }--align-end {
    align-items: flex-end;
  }

  // Position Modifiers
  #{ $prefix }--right {
    > #{ $prefix }__graphic {
      order: 3;
    }
    > #{ $prefix }__text {
      order: 1;
    }
  }

  #{ $prefix }--top {
    flex-direction: column;
  }

  #{ $prefix }--bottom {
    flex-direction: column;
    > #{ $prefix }__graphic {
      order: 3;
    }
    > #{ $prefix }__text {
      order: 1;
    }
  }

  #{ $prefix }--center {
    align-items: center;
    text-align: center;
  }

  // Rule Modifiers
  #{ $prefix }--rule-top {
    border-top: get("rule-border");
    padding-top: get("rule-padding");
  }

  #{ $prefix }--rule-bottom {
    border-bottom: get("rule-border");
    padding-bottom: get("rule-padding");
  }

  // Spacing Modifiers
  #{ $prefix }--compact {
    gap: get("gap-compact");
  }

  // Graphic Modifiers
  #{ $prefix }--auto {
    > #{ $prefix }__graphic {
      width: auto;
    }
  }
}