//
// Custom utilities
//
$utilities: () !default;
$utilities: map-merge(
    $utilities,
    (
        "position": (
            property: position,
            responsive: true,
            values: static relative absolute fixed sticky
        ),
        "opacity": (
            property: opacity,
            class: opacity,
            values: $opacity-values
        ),
        "opacity-hover": (
            property: opacity,
            state: hover,
            class: opacity,
            values: $opacity-values
        ),
        "font-size": (
            rfs: true,
            responsive: true,
            property: font-size,
            class: fs,
            values: $font-sizes
        ),
        "width": (
            responsive: true,
            property: width,
            class: w,
            values: $custom-sizes
        ),
        "max-width": (
            responsive: true,
            property: max-width,
            class: mw,
            values: $custom-sizes
        ),
        "min-width": (
            responsive: true,
            property: min-width,
            class: min-w,
            values: $custom-sizes
        ),
        "height": (
            responsive: true,
            property: height,
            class: h,
            values: $custom-sizes
        ),
        "max-height": (
            responsive: true,
            property: max-height,
            class: mh,
            values: $custom-sizes
        ),
        "min-height": (
            responsive: true,
            property: min-height,
            class: min-h,
            values: $custom-sizes
        ),
        "z-index": (
            property: z-index,
            class: z-index,
            values: $zindex-values
        ),
        "border-top-width": (
            property: border-top-width,
            class: border-top,
            values: $border-widths
        ),
        "border-bottom-width": (
            property: border-bottom-width,
            class: border-bottom,
            values: $border-widths
        ),
        "border-right-width": (
            property: border-right-width,
            class: border-right,
            values: $border-widths
        ),
        "border-left-width": (
            property: border-left-width,
            class: border-left,
            values: $border-widths
        ),
        "line-height": (
            property: line-height,
            class: lh,
            values: (
                0: 0,
                1: 1,
                sm: $line-height-sm,
                base: $line-height-base,
                lg: $line-height-lg,
                xl: $line-height-xl,
                xxl: $line-height-xxl
            )
        ),
        "letter-spacing": (
            property: letter-spacing,
            class: ls,
            values: $letter-spacing-values
        )
    )
);

@each $size,$value in $custom-sizes{
  .x-w-#{$size} {
    width: $value;
  }
  .x-min-w-#{$size} {
    min-width: $value;
  }
  .x-max-w-#{$size} {
    max-width: $value;
  }

  .x-h-#{$size} {
    height: $value;
  }
  .x-min-h-#{$size} {
    min-height: $value;
  }
  .x-max-h-#{$size} {
    max-height: $value;
  }
}

@each $size,$value in $font-sizes{
  .x-fs-#{$size} {
    font-size: $value;
  }
}

$directions: (t: top,b: bottom,l: left,r: right);

@each $size,$value in $custom-sizes{
  @each $dir,$dir-value in $directions{
    .x-m#{$dir}-#{$size} {
      margin-#{$dir-value}: $value;
    }
    .x-p#{$dir}-#{$size} {
      padding-#{$dir-value}: $value;
    }
  }
}