/**
*  Styles for 'CTA - buttons'
*  Use below classes for buttons in your application
* 1. Primary button -
* <button type="button" class="amadeus-hos-res-cn-cta-btn amadeus-hos-res-cn-cta-btn--primary">Primary Button</button>
* Note - Use 'amadeus-hos-res-cn-cta-btn--applied' class along with primary button in case of selected primary button with tick mark
* <button type="button" class="amadeus-hos-res-cn-cta-btn amadeus-hos-res-cn-cta-btn--primary amadeus-hos-res-cn-cta-btn--applied">Primary Button</button>
*
* 2. Secondary button-
* <button type="button" class="amadeus-hos-res-cn-cta-btn amadeus-hos-res-cn-cta-btn--secondary">Secondary Button</button>
*
* 3. Tertiary button-
* <button type="button" class="amadeus-hos-res-cn-cta-btn amadeus-hos-res-cn-cta-btn--tertiary">Tertiary Button</button>
*
* 4. Tertiary button with close-
* <button type="button" class="amadeus-hos-res-cn-cta-btn amadeus-hos-res-cn-cta-btn--tertiary close-list">Tertiary Button</button>
*
* 5. Tertiary disabled button-
* <button type="button" class="amadeus-hos-res-cn-cta-btn amadeus-hos-res-cn-cta-btn--tertiary amadeus-hos-res-cn-cta-btn--disabled">Tertiary Disabled Button</button>
*
* 6. Supporting button-
* <button type="button" class="amadeus-hos-res-cn-cta-btn amadeus-hos-res-cn-cta-btn--supporting">Supporting Button</button>
*
* 7. Disabled button-
* <button type="button" class="amadeus-hos-res-cn-cta-btn amadeus-hos-res-cn-cta-btn--disabled">Disabled Button</button>
*/
.amadeus-hos-res-cn-cta-btn {
    display: inline-block;
    font-size: $button-font-size;
    font-weight: $button-text-font-weight;
    letter-spacing: $button-text-letter-spacing;
    text-transform: uppercase;
    text-align: center;
    padding: 5px 20px;
    word-break: break-word;
    min-height: 40px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    min-width: 247px;
    transition: background-color 0.2s ease-in-out 0s;

    &--primary {
        color: $primary-button-text-color;
        background: $primary-button-bg-color;
        border-color: $primary-button-bg-color;

        svg {
            fill: $primary-button-text-color;
        }

        &:hover {
            background: $primary-button-hover-bg-color;
            border-color: $primary-button-hover-bg-color;
        }

        &.amadeus-hos-res-cn-cta-btn--applied {
            background: $primary-button-hover-bg-color;
            border-color: $primary-button-hover-bg-color;
        }
    }

    &--secondary {
        color: $secondary-button-text-color;
        background: $secondary-button-bg-color;
        border-color: $secondary-button-bg-color;

        &:hover {
            background: $secondary-button-hover-bg-color;
            border-color: $secondary-button-hover-bg-color;
        }
    }

    &--tertiary {
        color: $tertiary-button-text-color;
        background: $tertiary-button-bg-color;
        border-color: $tertiary-button-text-color;

        svg {
            fill: $tertiary-button-text-color;
            margin-top: -4px;
            margin-right: 2px;
            height: 12px;
            width: 12px;
        }

        &:hover,
        &.close-list {
            background: $tertiary-button-text-color;
            color: $supporting-button-text-color;

            svg {
                fill: $supporting-button-text-color;
            }
        }

        &.close-list {
            svg {
                transform: rotate(45deg);
                transition: all 0.5s;
                margin-top: -2px;
            }
        }

        &.amadeus-hos-res-cn-cta-btn--disabled {
            color: $disabled-button-text-color;
            background: $disabled-button-bg-color;
            border-color: $disabled-button-text-color;
            cursor: default;

            svg {
                fill: $disabled-button-text-color;
            }

            &:hover {
                background: $disabled-button-bg-color;
            }
        }
    }

    &--supporting {
        color: $supporting-button-text-color;
        background: $supporting-button-bg-color;
        border-color: $supporting-button-bg-color;

        &:hover {
            background: $supporting-button-hover-bg-color;
        }
    }

    &--disabled {
        color: $disabled-button-text-color;
        background: $disabled-button-bg-color;
        border-color: $disabled-button-bg-color;
        cursor: default !important;

        &:hover {
            background: $disabled-button-bg-color;
        }
    }

    &:focus {
        outline: none;
    }
}

/**
*  Custom tag and its styles for 'radio button'
*  Use below tag in your application
*Checked- <amadeus-hos-res-ct-radio-btn>
        <label class="amadeus-hos-res-cn-radio-btn amadeus-hos-res-radio-btn-radio">
            Radio button label
            <input type="radio" name="radio" checked="checked">
            <div class="amadeus-hos-res-cn-radio-btn_indicator"></div>
        </label>
   </amadeus-hos-res-ct-radio-btn>
*Disabled- <amadeus-hos-res-ct-radio-btn>
        <label class="amadeus-hos-res-cn-radio-btn amadeus-hos-res-radio-btn-radio">
            Radio button label
            <input type="radio" name="radio" disabled="disabled">
            <div class="amadeus-hos-res-cn-radio-btn_indicator"></div>
        </label>
   </amadeus-hos-res-ct-radio-btn>
*Disabled checked- <amadeus-hos-res-ct-radio-btn>
        <label class="amadeus-hos-res-cn-radio-btn amadeus-hos-res-radio-btn-radio">
            Radio button label
            <input type="radio" name="radio" disabled="disabled" checked="checked">
            <div class="amadeus-hos-res-cn-radio-btn_indicator"></div>
        </label>
   </amadeus-hos-res-ct-radio-btn>
*/
amadeus-hos-res-ct-radio-btn {
    display: inline-block;
    width: 24px;
    height: 24px;

    .amadeus-hos-res-cn-radio-btn {
        display: inline-block;
        position: relative;
        padding: 0;
        margin: 0;
        cursor: pointer;

        input {
            position: absolute;
            z-index: -1;
            opacity: 0;

            &:focus ~ .amadeus-hos-res-cn-radio-btn_indicator {
                background: white;
            }

            &:checked ~ .amadeus-hos-res-cn-radio-btn_indicator {
                background: $body-text-links-color;

                &:after {
                    display: block;
                }
            }

            &:checked {
                &:focus ~ .amadeus-hos-res-cn-radio-btn_indicator {
                    background: $body-text-links-color;
                }
            }

            &:disabled ~ .amadeus-hos-res-cn-radio-btn_indicator {
                background: white;
                opacity: 0.6;
                pointer-events: none;
                cursor: default;
            }
        }
    }

    .amadeus-hos-res-cn-radio-btn_indicator {
        position: absolute;
        top: 0;
        left: 0;
        height: 24px;
        width: 24px;
        background: white;
        border: 1px solid $body-text-links-color;
        border-radius: 50%;

        &:after {
            box-sizing: unset;
            content: "";
            position: absolute;
            display: none;
        }
    }

    .amadeus-hos-res-cn-radio-btn-radio {
        .amadeus-hos-res-cn-radio-btn_indicator {
            border-radius: 50%;

            &:after {
                left: 5px;
                top: 5px;
                height: 12px;
                width: 12px;
                border-radius: 50%;
                background: white;
                transition: background 250ms;
            }
        }

        input {
            &:disabled ~ .amadeus-hos-res-cn-radio-btn_indicator {
                border: 1px solid $disabled-button-bg-color;
                cursor: default;

                &:after {
                    background: $disabled-button-bg-color;
                    cursor: default;
                }
            }
        }
    }
}

/**
*  Custom tag and its styles for 'checkbox'
*  Use below tag in your application
* Checked- <amadeus-hos-res-ct-checkbox>
        <label for="test" class="amadeus-hos-res-cn-checkbox amadeus-hos-res-cn-checkbox-checkbox">
            Checkbox label
            <input id="test" type="checkbox" name="test" checked="checked">
            <div class="amadeus-hos-res-cn-checkbox_indicator"></div>
        </label>
    </amadeus-hos-res-ct-checkbox>
*Disabled- <amadeus-hos-res-ct-checkbox>
        <label for="test" class="amadeus-hos-res-cn-checkbox amadeus-hos-res-cn-checkbox-checkbox">
            Checkbox label
            <input id="test" type="checkbox" name="test" disabled="disabled">
            <div class="amadeus-hos-res-cn-checkbox_indicator"></div>
        </label>
    </amadeus-hos-res-ct-checkbox>
*Disabled checked- <amadeus-hos-res-ct-checkbox>
        <label for="test" class="amadeus-hos-res-cn-checkbox amadeus-hos-res-cn-checkbox-checkbox">
            Checkbox label
            <input id="test" type="checkbox" name="test" disabled="disabled" checked="checked">
            <div class="amadeus-hos-res-cn-checkbox_indicator"></div>
        </label>
    </amadeus-hos-res-ct-checkbox>
*/
amadeus-hos-res-ct-checkbox {
    .amadeus-hos-res-cn-checkbox {
        display: inline-block;
        position: relative;
        padding-left: 30px;
        margin-bottom: 5px;
        padding-top: 0;
        cursor: pointer;
        line-height: 20px;

        input {
            position: absolute;
            z-index: -1;
            opacity: 0;

            &:focus ~ .amadeus-hos-res-cn-checkbox_indicator {
                background: white;
            }

            &:checked ~ .amadeus-hos-res-cn-checkbox_indicator {
                background: $body-text-links-color;
                border: 1px solid $body-text-links-color;

                &:after {
                    display: block;
                }
            }

            &:checked {
                &:focus ~ .amadeus-hos-res-cn-checkbox_indicator {
                    background: $body-text-links-color;
                }
            }

            &:disabled ~ .amadeus-hos-res-cn-checkbox_indicator {
                background: white;
                pointer-events: none;
                cursor: default;
            }
        }

        &:hover {
            input ~ .amadeus-hos-res-cn-checkbox_indicator {
                background: white;
            }

            input {
                &:not([disabled]) {
                    &:checked ~ .amadeus-hos-res-cn-checkbox_indicator {
                        background: $body-text-links-color;
                    }
                }
            }
        }
    }

    .amadeus-hos-res-cn-checkbox_indicator {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        background: white;
        border: 1px solid $body-text-links-color;
        border-radius: 0px;

        &:after {
            box-sizing: unset;
            content: "";
            position: absolute;
            display: none;
        }
    }

    .amadeus-hos-res-cn-checkbox-checkbox {
        .amadeus-hos-res-cn-checkbox_indicator {
            &:after {
                left: 6px;
                top: 1px;
                width: 4px;
                height: 9px;
                border: solid white;
                border-width: 0 2.5px 2.5px 0;
                transform: rotate(45deg);
            }
        }

        input {
            &:checked {
                &:disabled ~ .amadeus-hos-res-cn-checkbox_indicator {
                    border: 1px solid $disabled-button-bg-color;
                    background: $disabled-button-bg-color;
                    cursor: default;
    
                    &:after {
                        border-color: white;
                        cursor: default;
                    }
                }
            }
            &:disabled ~ .amadeus-hos-res-cn-checkbox_indicator {
                border: 1px solid $disabled-button-bg-color;
                cursor: default;

                &:after {
                    border-color: white;
                    cursor: default;
                }
            }
        }
    }

    &.disabled {
        .amadeus-hos-res-cn-checkbox {
            cursor: not-allowed;
        }
    }
}

/*************************************************************************************/
/**
* Media Queries
*/
/**
*  media query for max-width 992px
*/
@include amadeusHosResWcMediaBreakpointDown(md) {
    /*Styles for 'CTA - buttons'*/
    .amadeus-hos-res-cn-cta-btn {
        font-size: convertPxToRem(14px);
        letter-spacing: 0;
        min-height: 48px;
    }

    /*Styles for 'for radio button'*/
    amadeus-hos-res-ct-radio-btn {
        height: 20px;
        width: 20px;

        .amadeus-hos-res-cn-radio-btn {
            .amadeus-hos-res-cn-radio-btn_indicator {
                height: 20px;
                width: 20px;
            }

            input:checked ~ .amadeus-hos-res-cn-radio-btn_indicator {
                &:after {
                    left: 4px;
                    top: 4px;
                    height: 10px;
                    width: 10px;
                }
            }
        }
    }
}
/**
*  Custom media query for max-width350px
*/
@include amadeusHosResWcMediaBreakpointDown350(350px) {
    .amadeus-hos-res-cn-cta-btn {
        width: 100% !important;
        min-width: auto;
    }
}

/**
* Media Queries for pixel density
*/
@include webkitDevicePixelRatio(1) {
    /**
    *  media query for max-width 992px
    */
    @include amadeusHosResWcMediaBreakpointDown(md) {
        /*Styles for 'CTA - buttons'*/
        .amadeus-hos-res-cn-cta-btn {
            font-size: convertPxToRem(14px);
            letter-spacing: 0;
            min-height: 48px;
        }

        /*Styles for 'for radio button'*/
        amadeus-hos-res-ct-radio-btn {
            height: 20px;
            width: 20px;

            .amadeus-hos-res-cn-radio-btn {
                .amadeus-hos-res-cn-radio-btn_indicator {
                    height: 20px;
                    width: 20px;
                }

                input:checked ~ .amadeus-hos-res-cn-radio-btn_indicator {
                    &:after {
                        left: 4px;
                        top: 4px;
                        height: 10px;
                        width: 10px;
                    }
                }
            }
        }
    }
    /**
    *  Custom media query for max-width350px
    */
    @include amadeusHosResWcMediaBreakpointDown350(350px) {
        .amadeus-hos-res-cn-cta-btn {
            width: 100% !important;
            min-width: auto;
        }
    }
}