#embedded-calculator {

    /* Flex Box to make childs in column*/
    .layout__flex-box {
        display: flex;
        width: 950px;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    /* Flex to make childs in row */
    .layout__flex-item {
        display: flex;

        >div {
            width: 100%;
        }
    }

    /* flex-container */
    .layout__flex-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 10px;

        >div {
            width: 100%;
        }
    }

    /* Media query for mobile screens */
    @media (max-width: 768px) {
        .layout__flex-container {
            flex-direction: column;
        }
    }

    /* Equal Sign */
    .layout__separator {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        padding-right: 10px;
    }

    /* Input Text */
    .form__input--wrapper {
        margin-bottom: 20px;
        margin-top: 20px;
        padding: 0 10px;

        p {
            font-size: 12px;
        }
    }

    .form__input--text {
        background-color: #fff;
        border: 1px solid #d8dada;
        border-radius: 4px;
        padding: 16px 18px 16px 18px;
        height: unset;
    }

    .form__input--text:invalid {
        color: #b2b4b4;
    }

    .form__input {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;

        &.slider-weight {
            width: 110px;
            justify-self: flex-end;
        }
    }

    .form__input input {
        width: 100%;
        box-sizing: border-box;
    }

    .form__input span {
        position: absolute;
        right: 10px;
        color: #363b3b;
        pointer-events: none;
    }

    .form__input--weight__unit input {
        padding-right: 60px;
        /* space for the 'kg' text */
    }

    input[disabled] {
        background: #ebefee;
    }

    label {
        position: relative;
        font-family: "Inter-Medium";
        font-size: 12px;
        line-height: 20px;
        display: block;
        margin-bottom: 8px;
    }

    .form__button--wrapper {
        margin: 10px 10px;

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

        &.form__button--right {
            text-align: end;
        }

        p {
            font-size: 12px;
        }
    }

    .required {
        color: #d00023;
    }

    .error {
        border: 1px solid #d00023;
    }

    .validation-message {
        display: none;
        font-family: "Inter-Medium";
        font-size: 12px;
        line-height: 20px;
        color: #d00023;
    }

    .invalid {
        display: block;
    }

    /* DropDown */
    .options--drop-down {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .options {
        border: 0;
        margin: 0;
        padding: 0;
        position: relative;
    }

    .options__legend {
        margin-bottom: 8px;
    }

    .options__field--drop-down {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        border: 1px solid #d8dada;
        border-radius: 4px;
        padding: 16px 34px 16px 18px;
        width: 100%;
    }

    .options--drop-down:after {
        font-family: "icomoon" !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\f0d7";
        position: absolute;
        right: 21px;
        top: calc(25px - 2px);
    }

    /* Button */
    .form__button {
        background-color: #d0006f;
        border: 1px solid #d0006f;
        color: #fff;
        display: inline-block;
        font-family: "Inter-Bold";
        font-weight: normal;
        font-style: normal;
        font-size: 16px;
        line-height: 24px;
        padding: 8px 16px;
        text-decoration: none;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;

        &.bgCore-1 {
            background-color: #830051;
            border: 1px solid #830051;
        }

        &.bgCore-2 {
            background-color: #4f0031;
            border: 1px solid #4f0031;
        }

        &.bgSecondary-2 {
            background-color: #9db0ac;
            border: 1px solid #9db0ac;
        }

        &.bgTertiary {
            background-color: #ffffff;
            color: #2c3030;
            border: 1px solid #2c3030;
        }
    }

    .form__button[disabled],
    .disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

    .form__button:hover {
        opacity: 0.8;
        text-decoration: none;
    }

    /* slider */
    .slider-parent {
        width: 100%;
        /* margin: 40px; */
    }

    .slider-container {
        position: relative;
        height: 4px;
        margin: 20px;
    }

    .slider-track {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #d7dbdb;
        border-radius: 5px;
        transition: background 0.3s ease;
    }

    .slider-thumb {
        position: absolute;
        top: -10px;
        left: 0%;
        width: 24px;
        height: 24px;
        background-color: #d0006f;
        border: 4px solid white;
        border-radius: 50%;
        cursor: pointer;
        transform: translateX(-50%);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        /* Soft drop shadow */
        transition: box-shadow 0.2s ease;
    }

    /* metric-display */
    .metric-display {
        display: flex;
        gap: 16px;

        .options__field--drop-down {
            width: 92px;
        }
    }

    /* Chips */
    .chip-parent {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        gap: 10px;
        margin: 10px;

        .chip-selector {
            width: max-content;
            padding-left: 16px;
            padding-right: 16px;
            padding-top: 5px;
            padding-bottom: 5px;
            background: white;
            overflow: hidden;
            border-radius: 9999px;
            outline: 1px var(--Border-Border-7, #b1b9b9) solid;
            outline-offset: -1px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            display: inline-flex;
            cursor: pointer;

            .chip-title {
                justify-content: center;
                display: flex;
                flex-direction: column;
                color: var(--Text-Body-1, #363b3b);
                font-size: 16px;
                font-family: "Inter-Regular";
                font-weight: 400;
                line-height: 24px;
                word-wrap: break-word;
            }

            &.active {
                background: var(--Background-Core-3, #d0006f);

                .chip-title {
                    color: var(--Text-Body-2, white);
                }
            }
        }
    }

    /* title  */
    .title--color-title-1 {
        color: #830051;
    }

    /* Radio */
    .options__field-description {
        color: #363b3b;
        font-family: "Inter-Regular";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

    input[type='radio'],
    input[type='checkbox'] {
        accent-color: #d0006f;
    }

    .toggle-group {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .toggle-group input[type="radio"] {
        display: none;
    }

    .toggle-group label {
        width: 100%;
    }

    .toggle-group input[type="radio"]:checked+label {
        background-color: #d0006f;
        border: 1px solid #d0006f;
    }

    .hidden {
        display: none;
    }

    #scoreBoard {
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #EC99C5;
        border-radius: 10px;
        padding: 40px;
        margin: 50px 0px;
    }
}