@import './var.scss';

:root {
    --result-width: #{$result-width};
    --result-height: #{$result-height};
    --result-margin: #{$result-margin};
    --result-padding: #{$result-padding};
    --result-font-size: #{$result-font-size};
    --result-text-color: #{$result-text-color};
    --result-line-height: #{$result-line-height};
    --result-title-font-size: #{$result-title-font-size};
    --result-title-font-weight: #{$result-title-font-weight};
    --result-title-margin: #{$result-title-margin};
    --result-content-font-size: #{$result-content-font-size};
    --result-content-color: #{$result-content-color};
    --result-content-margin: #{$result-content-margin};
}

.jing-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--result-text-color);

    &__icon {
        height: var(--result-width);
        width: var(--result-height);
        margin: 0 auto;
        img {
            width: 100%;
            height: 100%;
        }
    }

    &__title {
        display: block;
        font-size: var(--result-title-font-size);
        font-weight: var(--result-title-font-weight);
        margin-top: var(--result-title-margin);
    }

    &__subTitle {
        line-height: var(--result-line-height);
        margin-top: var(--result-padding);
        font-size: var(--result-font-size);
        color: var(--result-content-color);
        text-align: center;
    }

    &__content {
        line-height: var(--result-line-height);
        margin-top: var(--result-content-margin);
        font-size: var(--result-content-font-size);
        color: var(--result-content-color);
        width: 100%;
        &--left {
            text-align: left;
        }

        &--center {
            text-align: center;
        }

        &--right {
            text-align: right;
        }
    }

    &__extra {
        margin-top: var(--result-margin);
    }
}

@media screen and (max-width: 320px) and (max-height: 480px) {
    .jing-result {
        margin-bottom: var(--result-margin);
        padding-top: var(--result-padding);
    }
}