/**
*  Styles for 'input form fields'
*  Use below classes for input form fields in your application
    <div class="name-on-card form-group amadeus-hos-res-cn-form-group error/disabled-field col-12 col-lg-6">
        <label for="amadeus-hos-res-id-credit-card-holder-name" class="is-mandatory amadeus-hos-res-cn-label">Name on Card</label>
        <input type="text" id="amadeus-hos-res-id-credit-card-holder-name" class="form-control amadeus-hos-res-cn-form-control" placeholder="Full name on the credit card" tabindex="0" aria-label="Name on Card" role="form" maxlength="64">
            <div class="error-msg/helper-text">
                Please enter a credit card holder.
            </div>
    </div>
*   In case of .disabled field - handle tabindex (change it to -1) so that on tab enter user will not be able to edit the field.
*/
.amadeus-hos-res-cn-form-group {
    .amadeus-hos-res-cn-label {
        display: inline-block;
        color: $default-body-text-color;
        font-size: convertPxToRem(15px);
        font-weight: $font-weight-regular;
        letter-spacing: 0.03px;
        word-break: break-word;
        overflow-wrap: anywhere;
        flex-basis: 0px;
        flex-grow: 1;
        max-width: 100%;
        margin-bottom: 6px;

        &.is-mandatory {
            &:after {
                content: "*";
                color: $inline-error-message-text;
                font-size: convertPxToRem(17px);
                padding-left: 4px;
            }
        }
    }

    .amadeus-hos-res-cn-form-control {
        height: var(--amadeus-hos-res-cv-form-control-height, 50px);
        background-color: $rooms-rates-bg;
        border-radius: 0px;
        border: 1px solid $form-field-border-color;
        padding: 5px 15px;
        font-size: convertPxToRem(15px);
        font-weight: $font-weight-regular;
        line-height: normal;
        color: $default-body-text-color;

        &:hover {
            border: 2px solid $form-field-border-color;
        }

        &:focus {
            color: $default-body-text-color;
            background-color: $rooms-rates-bg;
            border-color: $form-field-border-color;
            outline: none;
            box-shadow: none;
            border: 2px solid $form-field-border-color;
        }

        &::placeholder {
            color: $disabled-button-text-color;
        }
    }

    &.error {
        .amadeus-hos-res-cn-label,
        .error-msg {
            color: $inline-error-message-text;
            margin-top: 3px;
            font-size: convertPxToRem(13px);
            font-weight: $font-weight-regular;
        }

        .amadeus-hos-res-cn-form-control {
            border: 1px solid $inline-error-message-text;
        }
    }

    &.disabled-field {
        cursor: not-allowed;
        .amadeus-hos-res-cn-label {
            color: $disabled-button-text-color;
            pointer-events: none;
        }

        .amadeus-hos-res-cn-form-control {
            border-color: $disabled-button-text-color;
            background: $disabled-button-bg-color;
            color: $disabled-button-text-color;
            pointer-events: none;
        }
    }

    .helper-text {
        margin-top: 3px;
        color: $default-body-text-color;
        font-size: convertPxToRem(15px);
        font-weight: $font-weight-regular;
        letter-spacing: 0.03px;
    }
}

/*************************************************************************************/
/**
* Media Queries
*/
/**
*  media query for max-width 992px
*/
@include amadeusHosResWcMediaBreakpointDown(md) {
    .amadeus-hos-res-cn-form-group {
        .amadeus-hos-res-cn-label {
            font-size: convertPxToRem(12px);
        }

        .amadeus-hos-res-cn-form-control {
            height: 48px;
            font-size: convertPxToRem(16px);
        }

        &.error {
            .amadeus-hos-res-cn-label,
            .error-msg {
                margin-top: 3px;
                font-size: convertPxToRem(12px);
            }
        }

        .helper-text {
            margin-top: 3px;
            font-size: convertPxToRem(12px);
        }
    }
}

/**
* Media Queries for pixel density
*/
@include webkitDevicePixelRatio(1) {
    /**
*  media query for max-width 992px
*/
    @include amadeusHosResWcMediaBreakpointDown(md) {
        .amadeus-hos-res-cn-form-group {
            .amadeus-hos-res-cn-label {
                font-size: convertPxToRem(12px);
            }

            .amadeus-hos-res-cn-form-control {
                height: 48px;
                font-size: convertPxToRem(16px);
            }

            &.error {
                .amadeus-hos-res-cn-label,
                .error-msg {
                    margin-top: 3px;
                    font-size: convertPxToRem(12px);
                }
            }

            .helper-text {
                margin-top: 3px;
                font-size: convertPxToRem(12px);
            }
        }
    }
}