@use "sass:list";
@use "sass:map";
@use "sass:string";
@use "../../functions" as *;
@use "../../properties" as *;
@use "../../tokens" as *;

// Outputs a solid outline of $value... width
@mixin u-outline($value...) {
  $value: unpack($value);
  $important: null;
  $widths: map-deep-get($system-properties, "outline", standard);
  @if has-important($value) {
    $value: remove($value, "!important");
    @if list.length($value) == 1 {
      $value: de-list($value);
    }
    $important: " !important";
  }
  @each $this-value in $value {
    $this-value: smart-quote($this-value);
    $match: false;
    @if map.has-key($all-color-shortcodes, $this-value) {
      $match: true;
      outline-color: color(smart-quote($this-value)) #{$important};
    } @else if map.has-key($widths, $this-value) {
      $match: true;
      $final-value: map.get($widths, $this-value);
      outline-width: string.unquote("#{$final-value}#{$important}");
      outline-style: solid#{$important};
    } @else if type-of($this-value) == "number" {
      $converted-value: number-to-token($this-value);
      @if map.has-key($widths, $converted-value) {
        $match: true;
        $final-value: map.get($widths, $converted-value);
        outline-width: string.unquote("#{$final-value}#{$important}");
        outline-style: solid#{$important};
      } @else {
        @error '#{$this-value} is not a valid outline width. Accepted values: #{map.keys($widths)}';
      }
    }
    @if not $match {
      @error '`#{$this-value}` is not a valid outline value.';
    }
  }
}