input {
    font-family: var(--main-fonts);
    font-size: var(--size-font-p);
    line-height: var(--size-line-height-p);
    color: rgb(var(--color-neutral-900-rgb));
    font-weight: 500;
}

    input::placeholder {
        font-family: var(--main-fonts);
        font-size: var(--size-font-p);
        line-height: var(--size-line-height-p);
        color: rgb(var(--color-neutral-300-rgb));
        font-weight: 400;
    }

.input-and-label {
    display: flex;
    flex-direction: column;
    gap: var(--size-spacing-2);
    box-sizing: border-box;
    width: 100%;
}

    .input-and-label .field {
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        background-color: rgb(var(--color-primary-0-rgb));
        width: 100%;
        border: 1px solid rgb(var(--color-secondary-600-rgb));
        border-radius: var(--size-radius-base);
        padding: var(--size-spacing-6) var(--size-spacing-12);
        align-items: center;
        gap: var(--size-spacing-8);
    }

    .input-and-label.incorrect-value .field {
        border-color: rgb(var(--color-red-600-rgb));
        box-shadow: inset 0 0 2px 0 rgb(var(--color-red-600-rgb));
    }



    .input-and-label.active .icon-mask {
        --icon-color: rgb(var(--color-neutral-900-rgb));
    }


    .input-and-label.active .field:hover {
        border-color: rgb(var(--color-primary-300-rgb));
    }

        .input-and-label.active .field.input-in-progress {
            border-color: rgb(var(--color-primary-500-rgb));
        }

        .input-and-label input {
            background-color: transparent;
            outline: none;
            border: none;
            box-shadow: none;
            width: 100%;
        }

    .input-and-label.inactive .field {
        background-color: rgb(var(--color-secondary-100-rgb));
        border-style: dashed;
    }

    .input-and-label.inactive input {
        color: rgb(var(--color-neutral-500-rgb));
        pointer-events: none;
    }

    .input-and-label.inactive .icon-mask {
        --icon-color: rgb(var(--color-neutral-500-rgb));
    }

    .input-and-label .field.regex input {
        font-family: var(--font-family-regex);
    }