@import './mixins/mixins.scss';

@include themes-mixin {
  @include b(result) {
    font-size: 14px;
    color: $--n-secondary-text-color;
    transition: color .3s $default-cubic-bezier;
    @include m(success-status) {
      @include b(result-icon) {
        fill: $--success-6;
      }
    }
    @include m(info-status) {
      @include b(result-icon) {
        fill: $--info-6;
      }
    }
    @include m(warning-status) {
      @include b(result-icon) {
        fill: $--warning-6;
      }
    }
    @include m(error-status) {
      @include b(result-icon) {
        fill: $--error-6;
      }
    }
    @include b(result-icon) {
      transition: fill .3s $default-cubic-bezier;
      display: flex;
      justify-content: center;
      @include e(status-image) {
        width: 80px;
        height: 80px;
      }
    }
    @include b(result-header) {
      @include e(title) {
        margin-top: 16px;
        font-size: 32px;
        font-weight: 700;
        color: $--n-text-color;
        transition: color .3s $default-cubic-bezier;
        text-align: center;
      }
      @include e(description) {
        margin-top: 4px;
        text-align: center;
        font-size: 14px;
      }
    }
    @include b(result-content) {
      margin-top: 24px;
    }
    @include b(result-footer) {
      margin-top: 24px;
      text-align: center;
    }
  }
}