@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

.#{$hashClassName}.cn-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: $m-s-12;

  &.cn-result-mode-page {
    height: 100%;
  }

  &.cn-result-type-success {
    .cn-result-icon {
      color: $m-color-success;
    }
  }

  &.cn-result-type-warning {
    .cn-result-icon {
      color: $m-color-warning;
    }
  }

  &.cn-result-type-error {
    .cn-result-icon {
      color: $m-color-error;
    }
  }

  &.cn-result-type-info {
    .cn-result-icon {
      color: #284cc0;
    }
  }

  .cn-result-icon {
    display: flex;
    justify-content: center;
  }

  .cn-result-img {
    height: 128px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
  }

  .cn-result-title {
    margin-top: 12px;
    color: $m-color-text;
    font-size: $m-font-size-headline-5;
    font-family: PingFangSC-Medium;
    line-height: 1;
    text-align: center;
  }

  .cn-result-subTitle {
    margin-top: 12px;
    color: #666;
    font-size: $m-font-size-body-1;
    line-height: 1.5em;
    text-align: center;
  }

  .cn-result-extra {
    margin: 12px auto 0;
    text-align: center;

    > * {
      margin-left: 12px;

      &:first-child {
        margin-left: 0;
      }
    }
  }
}