/*!
 * name: @jswork/wsui-generators
 * description: Webkit sass generator mixins.
 * homepage: https://github.com/afeiship/wsui-generators
 * version: 2.0.13
 * date: 2023-06-28 13:50:08
 * license: MIT
 */

@use 'sass:math';

$wsui-generators-options: (
  global: '',
  background-color: 'bg-',
  border-color: 'bcd-',
  border-radius: 'bdr-',
  box: '-',
  color: 'c-',
  font-size: 'f-',
  font-weight: 'fw-',
  gap: 'gap-',
  icon: 'ico-',
  line-clamp: 'lc-',
  line-height: 'lh-',
  height-line-height: 'hlh-',
  line: 'line-',
  blank: 'blank-',
  width-w1: 'w1-',
  width-wp: 'wp-'
) !default;

%blank {
  display: block;
  font-size: 0;
  overflow: hidden;
  clear: both;
}

%icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

@function rem($value, $rem: 50) {
  @if $rem == px {
    @return #{$value}px;
  } @else {
    @return #{$value/$rem}rem;
  }
}

/* background-color Start */
@mixin generator-background-color($map) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );
  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: background-color,
  );

  $prefix: "." + $global-prefix + $module-prefix;

  @each $key, $color in $map {
    #{$prefix}#{$key} {
      background-color: #{$color};
    }
  }
}
/* background-color End */

/* blank Start */
@mixin generator-blank($list, $rem: px) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: blank,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  #{$prefix} {
    @each $i in $list {
      &#{$i} {
        height: rem($i, $rem);
        @extend %blank;
      }
    }
  }
}
/* blank End */

/* border-color Start */
@mixin generator-border-color($map) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: border-color,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  @each $key, $color in $map {
    #{$prefix}#{$key} {
      border-color: #{$color};
    }
  }
}
/* border-color End */

/* border-radius Start */
// NORMAL
@mixin generator-border-radius($list, $rem: px) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: border-radius,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  #{$prefix} {
    @each $i in $list {
      &#{$i} {
        border-radius: rem($i, $rem);
      }
    }
  }
}
/* border-radius End */

/* box Start */
$boxing-map: (
  m: margin,
  mt: margin-top,
  mr: margin-right,
  mb: margin-bottom,
  ml: margin-left,
  p: padding,
  pt: padding-top,
  pr: padding-right,
  pb: padding-bottom,
  pl: padding-left,
  mx: (
    margin-left,
    margin-right
  ),
  my: (
    margin-top,
    margin-bottom
  ),
  px: (
    padding-left,
    padding-right
  ),
  py: (
    padding-top,
    padding-bottom
  )
);

// NORMAL
@mixin generator-box($list, $direction: 'm', $rem: px, $client: web) {
  $map-value: map_get($boxing-map, $direction);
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: box
  );

  $prefix: $global-prefix + $direction + $module-prefix;
  $typeof: type-of($map-value);

  @if $typeof == string {
    .#{$prefix} {
      @each $i in $list {
        &#{$i} {
          @if $client == 'weapp' {
            &,
            &_ > view,
            &_ > text {
              #{$map-value}: rem($i, $rem);
            }
          } @else {
            &,
            &_ > * {
              #{$map-value}: rem($i, $rem);
            }
          }
        }
      }
    }
  } @else {
    .#{$prefix} {
      @each $i in $list {
        &#{$i} {
          @if $client == 'weapp' {
            &,
            &_ > view,
            &_ > text {
              @each $item in $map-value {
                #{$item}: rem($i, $rem);
              }
            }
          } @else {
            &,
            &_ > * {
              @each $item in $map-value {
                #{$item}: rem($i, $rem);
              }
            }
          }
        }
      }
    }
  }
}
/* box End */

/* color Start */
@mixin generator-color($map) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: color,
  );

  $prefix: "." + $global-prefix + $module-prefix;

  @each $name, $color in $map {
    #{$prefix}#{$name} {
      color: #{$color};
    }
  }
}
/* color End */

/* font-family Start */
// fontfamily
@mixin generator-font-family($ff-map) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: font-family
  );
  $prefix: '.' + $global-prefix + $module-prefix;

  @each $key, $value in $ff-map {
    #{$prefix}#{$key} {
      font-family: $value;
    }
  }
}

/* font-family Start */

/* font-size Start */

// NORMAL
@mixin generator-font-size($inList, $rem: px) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: font-size,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  #{$prefix} {
    @each $i in $inList {
      &#{$i} {
        font-size: rem($i, $rem);
      }
    }
  }
}
/* font-size End */

/* font-weight Start */
// fontWeight
@mixin generator-font-weight($list) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: font-weight,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  @each $value in $list {
    #{$prefix}#{$value} {
      font-weight: $value;
    }
  }
}

/* font-weight Start */

/* gap Start */
@mixin generator-gap($list, $rem: px) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: gap
  );
  $prefix: '.' + $global-prefix + $module-prefix;

  #{$prefix} {
    @each $i in $list {
      &#{$i} {
        gap: #{$i}px;
      }
    }
  }
}
/* gap End */

/* icon Start */
@mixin generator-icon($list) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: icon
  );
  $prefix: '.' + $global-prefix + $module-prefix;

  #{$prefix} {
    @each $i in $list {
      &#{$i} {
        @extend %icon;
        font-size: #{$i}px;
      }
    }
  }
}
/* icon End */

/* line-clamp Start */
%line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

@mixin line-clamp($line) {
  @extend %line-clamp;
  -webkit-line-clamp: $line;
}

@mixin generator-line-clamp($list) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: line-clamp,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  #{$prefix} {
    @each $i in $list {
      &#{$i} {
        -webkit-line-clamp: $i;
        @extend %line-clamp;
      }
    }
  }
}

/* line-clamp End */

/* line-height Start */
// NORMAL
@mixin generator-line-height($list, $rem: px) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: line-height,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  #{$prefix} {
    @each $i in $list {
      &#{$i} {
        line-height: rem($i, $rem);
      }
    }
  }
}

@mixin generator-hlh($list, $rem: px) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: height-line-height,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  #{$prefix} {
    @each $i in $list {
      &#{$i} {
        height: rem($i, $rem);
        line-height: rem($i, $rem);
      }
    }
  }
}
/* line-height End */

/* line Start */
@mixin generator-line($list, $color: #ccc, $rem: px) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: line,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  %line-color {
    background-color: $color;
  }

  #{$prefix} {
    @each $i in $list {
      &#{$i} {
        height: #{$i}px;
        @extend %blank;
        @extend %line-color;
      }
    }
  }
}
/* line End */

/* width Start */
@mixin generator-width-w1($list) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: width-w1,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  @each $value in $list {
    #{$prefix}#{$value} {
      width: percentage(math.div(1, $value));
      // width: percentage(1/$value);
    }
  }
}

@mixin generator-width-wp($list) {
  $global-prefix: map-get(
    $map: $wsui-generators-options,
    $key: global,
  );

  $module-prefix: map-get(
    $map: $wsui-generators-options,
    $key: width-wp,
  );
  $prefix: "." + $global-prefix + $module-prefix;

  @each $value in $list {
    #{$prefix}#{$value} {
      width: percentage(math.div($value, 10));
      // width: percentage($value/10);
    }
  }
}
/* width End */