@import url(../var.less);

@result-prefix: ~"@{prefix}result";

.@{result-prefix}{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box;
  padding: @result-padding;

  &__icon {
    svg {
      width: @result-icon-font-size;
      height: @result-icon-font-size;
    }

    [class*=icon-403],[class*=icon-404],[class*=icon-500] {
      width: auto;
      height: auto;
    }
  }

  &__title {
    margin-top: @result-title-margin-top;

    p {
      margin: 0;
      font-size: @result-title-font-size;
      font-weight: @result-title-font-weight;
      color: @primary-text-color;
      line-height: 1.3;
    }
  }

  &__subtitle {
    margin-top: @result-subtitle-margin-top;

    p {
      margin: 0;
      font-size: @font-size-base;
      color: @placeholder-text-color;
      line-height: 1.3;
    }
  }

  &__extra {
    margin-top: @result-extra-margin-top;
  }

  .icon-success {
    fill: @result-success-color;
  }

  .icon-error {
    fill: @result-danger-color;
  }

  .icon-info {
    fill: @result-info-color;
  }

  .icon-warning {
    fill: @result-warning-color;
  }
}