@use "../theme/colors" as *;
@use "../theme/breakpoints" as *;

.form-control {
    .input-control {
        font-weight: 400;
        padding: 0.5rem 1rem;
        text-align: center;
        min-width: 250px;
        font-size: 1.1rem;
        color: black !important;
        border-radius: 2rem;
        box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px inset;
        border: none;

        @media screen and (max-width: $breakpoints-sm) {
            font-size: 1rem;
        }

        &:disabled {
            background: #C0C0C0;
            cursor: not-allowed;
        }

        option {
            color: black !important;
        }
    }

    .grouped-fields {
        display: flex;
        gap: 0.7rem;

        @media screen and (max-width: $breakpoints-sm) {
            gap: 0.3rem;
        }

        .input-control {
            min-width: unset;
            width: 50%;
        }
    }
}

.form-error {
    color: $error !important;
    font-weight: 600;
    margin: 0;
    padding: 0;
}