$prefixCls: 'za' !default;

@import '~@zarm-design/bem/sass';

$keyframesSeparator: '_';

@mixin define($key, $value) {
  $block: str-replace(get-block(&), '.', '');

  --#{$key}: var(--#{$block + $blockSeparator + $key}, #{$value});
}

@mixin keyframes($name) {
  $block: str-replace(get-block(&), '.', '');
  $selector: $block + $keyframesSeparator + $name;

  @at-root {
    @keyframes #{$selector} {
      @content;
    }
  }
}

@mixin animation($name, $value) {
  $block: str-replace(get-block(&), '.', '');
  $selector: $block + $keyframesSeparator + $name;

  animation: #{$selector} $value;
}

@mixin defineColorHSL($color, $hue, $saturation, $lightness) {
  #{$color}: unquote('hsl(#{$hue}, #{$saturation}, #{$lightness})');
  #{$color}-h: #{$hue};
  #{$color}-s: #{$saturation};
  #{$color}-l: #{$lightness};
  #{$color}-light: unquote('hsl(#{$hue}, #{$saturation}, #{$lightness + 4})');
  #{$color}-light-h: #{$hue};
  #{$color}-light-s: #{$saturation};
  #{$color}-light-l: #{$lightness + 4};
  #{$color}-lighter: unquote('hsl(#{$hue}, #{$saturation}, 95%)');
  #{$color}-lighter-h: #{$hue};
  #{$color}-lighter-s: #{$saturation};
  #{$color}-lighter-l: 95%;
  #{$color}-dark: unquote('hsl(#{$hue}, #{$saturation}, #{$lightness - 4})');
  #{$color}-dark-h: #{$hue};
  #{$color}-dark-s: #{$saturation};
  #{$color}-dark-l: #{$lightness - 4};
  #{$color}-darker: unquote('hsl(#{$hue}, #{$saturation}, 20%)');
  #{$color}-darker-h: #{$hue};
  #{$color}-darker-s: #{$saturation};
  #{$color}-darker-l: 20%;
}

@mixin placeholder {
  &::placeholder {
    @content;
  }
}

@mixin onepx(
  $positions: top right bottom left,
  $border-color: var(--za-border-color),
  $border-radius: 0
) {
  &:after {
    @if $positions == 'none' {
      content: none;
    }
    @else {
      content: '';
      pointer-events: none;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      border-radius: $border-radius;
      border: 0 solid $border-color;

      @each $position in $positions {
        /* prettier-ignore */
        border-#{$position}-width: 1PX;
      }

      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
        border-radius: $border-radius * 2;
      }

      @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
        width: 300%;
        height: 300%;
        transform: scale(0.3333);
        transform-origin: 0 0;
        border-radius: $border-radius * 3;
      }
    }
  }
}