/* Factoring check — extracted from frontend/scss/includes/elements/_factoringcheck.scss */
/* plus inline rules formerly in styles.scss (#factoringcheck-angebot, #factoring-contact, .factoring-facts-embedded) */

.factoring-check {
    .result {
        background-image: url("../../../Images/factoringcheck-indicator.jpg");
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: 100% 8px;
        position: relative;
        padding-top: 100px;
        margin-bottom: 100px;

        .indicator {
            height: 8px;
            background-color: #d7d7d7;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            z-index: 2;
            transition: width 2000ms;

            .drop {
                position: absolute;
                top: -79px;
                left: -35px;
                width: 73px;
                height: 79px;
            }

            .result-status-title {
                position: absolute;
                font-size: 1rem;
                width: 140px;
                top: 20px;
                line-height: 110%;
                opacity: 0;
                transition: opacity 100ms;

                &.visible {
                    opacity: 1;
                }

                .ok {
                    color: #09a736;
                }

                .not-ok {
                    color: #b7172e;
                }
            }

            .result-status-icon {
                position: absolute;
                top: 5px;
                right: 2px;
                opacity: 0;
                transition: opacity 100ms;

                &.visible {
                    opacity: 1;
                }
            }

            &.text-left .result-status-title {
                right: 75px;
                text-align: right;
            }

            &.text-right .result-status-title {
                left: 80px;
                text-align: left;
            }
        }
    }

    form .form-group.submit {
        @media (min-width: 768px) {
            margin-top: 2.1875rem;
        }
    }
}

/* Kontakt Form Popup */
#factoringcheck-angebot {
    .form-check {
        padding-top: 10px;
    }
}

#factoring-contact {
    margin-bottom: 80px;
}

/* Zweispaltige Darstellung von Fakten in der rechten Spalte einer Box */
.factoring-facts-embedded {
    margin-top: 30px;

    /* width is relative to column; positioning must be adjusted if padding of the box changes */
    @media (min-width: 1330px) {
        margin-top: 0;
        position: absolute;
        bottom: -120px;
        right: -110px;
        width: 110%;
    }

    .number-fact-box {
        margin-bottom: 15px;
    }

    .number-fact-box .number {
        @media (min-width: 1330px) {
            font-size: 3.5rem;
        }
    }
}