// recipe ingredients calculator

.recipe-nutrition-calculator {

    &.has-translation {
        .recipe-nutrition-calculator-content {
            position: relative;

            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 40%;
                width: 1px;
                height: 100%;
                background: #EDEEEE;
            }
        }

        .recipe-ingredients-list-wrapper {
            >:nth-child(2) {
                flex-basis: 60%;
            }
        }

        .footer {
            justify-content: center;
        }
    }

    .recipe-ingredients-list-wrapper {
        justify-content: space-between;

        .recipe-ingredients-list {
            font-size: 14px;
            font-weight: 500;
            flex-basis: 40%;
        }
    }

    .dr-field {
        padding: 16px 24px;
        border: none !important;
        margin: 0 !important;
    }

    .footer {
        position: sticky;
        bottom: 0;
        background-color: #FFF;
        padding: 20px 24px;
        border-top: 1px solid #EDEEEE;
    }

    .title-section {
        padding: 16px 24px 0;

        .title-heading {
            flex-basis: 60%;

            h3 {
                margin: 0;
                font-size: 16px;
                line-height: 1.5;
            }
        }
    }

    .ingredient-input {
        padding: 8px 14px;
        border: 1px solid #EDEEEE;
        border-radius: 4px;
    }

    .recipe-ingredients-translation {
        font-size: 14px;
        line-height: 1.8;
        font-weight: 500;
    }

    .recipe-qty {
        flex-basis: 10%;
        font-weight: 700;
    }

    .recipe-unit {
        flex-basis: 25%;
    }

    .recipe-ingredient {
        flex-basis: 65%;
    }
}

body:has(.recipe-nutrition-calculator) {
    .wpdelicious-modal__body {
        padding: 0;
    }

    .wpdelicious-modal__header-heading-container {
        border-bottom: 0;
    }

    .wpdelicious-modal__header {
        border-bottom: 1px solid #EDEEEE;
    }
}