@use '@style/theme/index.scss' as theme;
@use 'sass:meta';
@use 'sass:string';
@use 'sass:map';
@use '@components/result/style/token.scss' as token;
@use '@components/result/style/token.scss' as *;

$result-prefix-cls: string.unquote('#{theme.$prefix}-result');

@function _str-replace-all($string, $search, $replace) {
  $index: string.index($string, $search);

  @if not $index {
    @return $string;
  }

  $before: string.slice($string, 1, $index - 1);
  $after: string.slice($string, $index + string.length($search));

  @return $before + $replace + _str-replace-all($after, $search, $replace);
}

@function token-var($name, $fallback: null) {
  $vars: meta.module-variables('token');
  $value: map.get($vars, $name);

  @if $value == null {
    // meta.module-variables() exposes token names normalized to hyphens, while
    // the source looks them up with underscores (e.g. 'color-text_disabled').
    // map.get() compares keys as exact strings, so normalize before retrying.
    $value: map.get($vars, _str-replace-all($name, '_', '-'));
  }

  @if $value == null {
    @return $fallback;
  }

  @return $value;
}

@mixin icon-status($status) {
  $color: string.unquote('result-color-icon_#{$status}');
  $bg: string.unquote('result-color-icon-bg_#{$status}');

  color: token-var($color);
  background-color: token-var($bg);
}

.#{$result-prefix-cls} {
  box-sizing: border-box;
  width: 100%;
  padding: $result-padding-top_icon $result-padding-horizontal $result-padding-bottom;

  &-icon {
    margin-bottom: $result-margin-icon-bottom;
    font-size: $result-size-icon;
    text-align: center;

    &-tip {
      display: flex;
      align-items: center;
      justify-content: center;
      width: $result-size-icon-wrapper;
      height: $result-size-icon-wrapper;
      margin: 0 auto;
      border-radius: 50%;
    }

    // status == null
    &-custom &-tip {
      width: unset;
      height: unset;
      color: $result-color-icon_default;
      font-size: $result-size-icon_custom;
    }

    &-success &-tip {
      @include icon-status(success);
    }

    &-error &-tip {
      @include icon-status(error);
    }

    &-info &-tip {
      @include icon-status(info);
    }

    &-warning &-tip {
      @include icon-status(warning);
    }

    &-404,
    &-403,
    &-500 {
      padding-top: $result-padding-top;

      .#{$result-prefix-cls}-icon-tip {
        width: $result-size-image-width;
        height: $result-size-image-width;
        line-height: $result-size-image-width;
      }
    }
  }

  &-title {
    color: $result-color-title-text;
    font-weight: $result-font-title-weight;
    font-size: $result-font-title-size;
    line-height: 1.5715;
    text-align: center;
  }

  &-subtitle {
    color: $result-color-subtitle-text;
    font-size: $result-font-subtitle-size;
    line-height: 1.5715;
    text-align: center;
  }

  &-extra {
    margin-top: $result-margin-extra-top;
    text-align: center;
  }

  &-content {
    margin-top: $result-margin-content-top;
  }
}