/** Box Shadow */
@use 'sass:map';

@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/function' as *;

@include b('shadow') {
  @each $size in ('default', 'sm', 'md', lg) {
    $box-shadow-sizes: map.get($box-shadow, $size);
    $box-shadow-color: map.get($box-shadow-colors, $size);
    $color-attr-value: '';
    @each $box-shadow-size in $box-shadow-sizes {
      $color-attr-value: $color-attr-value +
        $box-shadow-size +
        ' var(--tn-shadow-color),';
    }
    // 移除最后一个逗号
    $color-attr-value: str-slice(
      $color-attr-value,
      1,
      str-length($color-attr-value) - 1
    );
    $default-attr-value: str-replace(
      $color-attr-value,
      'var(--tn-shadow-color)',
      $box-shadow-color
    );

    $prefix: if($size == 'default', '', '-' + $size);

    &#{$prefix} {
      #{getCssVarName('shadow')}: #{$default-attr-value};
      #{getCssVarName('shadow-colored')}: #{$color-attr-value};
    }
    &#{$prefix} {
      box-shadow: #{getCssVar('shadow')};
    }
  }
  &-blur {
    position: relative;
    &::before {
      content: ' ';
      display: block;
      background: inherit;
      background-color: inherit;
      background-image: inherit;
      filter: blur(5px);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 5px;
      left: 5px;
      z-index: inherit;
      opacity: 0.4;
      transform-origin: 0 0;
      border-radius: inherit;
      transform: scale(1, 1);
    }
  }
}