@use "sass:map";
@use "sass:list";

$btnThemeList: (
  (
    name: "primary",
    textColor: var(--vxe-ui-font-primary-color),
    btnColor: #fff,
  ),
  (
    name: "success",
    textColor: var(--vxe-ui-status-success-color),
    btnColor: #fff,
  ),
  (
    name: "info",
    textColor: var(--vxe-ui-status-info-color),
    btnColor: #fff,
  ),
  (
    name: "warning",
    textColor: var(--vxe-ui-status-warning-color),
    btnColor: #fff,
  ),
  (
    name: "danger",
    textColor: var(--vxe-ui-status-danger-color),
    btnColor: #fff,
  ),
  (
    name: "error",
    textColor: var(--vxe-ui-status-error-color),
    btnColor: #fff,
  )
);

.vxe-result {
  position: relative;
  color: var(--vxe-ui-font-color);
  font-family: var(--vxe-ui-font-family);
  text-align: center;
  font-size: var(--vxe-ui-font-size-default);
  padding: 3em 2em;
  @for $index from 0 to list.length($btnThemeList) {
    $item: list.nth($btnThemeList, $index + 1);
    &.theme--#{map.get($item, name)} {
      .vxe-result--icon-wrapper {
        color: map.get($item, textColor);
      }
    }
  }
}
.vxe-result--inner {
  display: inline-block;
}
.vxe-result--icon-wrapper {
  font-size: 4.8em;
  & > i {
    display: block;
  }
}
.vxe-result--img-wrapper {
  & > img {
    height: 5.2em;
  }
}
.vxe-result--title-wrapper {
  font-weight: 700;
  font-size: 1.74em;
  padding: 0.25em 0;
  margin-top: 0.6em;
}
.vxe-result--content-wrapper {
  padding: 0.25em 0;
  color: var(--vxe-ui-font-lighten-color);
}
.vxe-result--extra-wrapper {
  padding: 0.25em 0;
  margin-top: 1em;
}

.vxe-result {
  &.size--medium {
    font-size: var(--vxe-ui-font-size-medium);
  }
  &.size--small {
    font-size: var(--vxe-ui-font-size-small);
  }
  &.size--mini {
    font-size: var(--vxe-ui-font-size-mini);
  }
}