/**
*  Custom tag and its styles for 'icon buttons'
*  Use below tag in your application
*  <amadeus-hos-res-ct-icon-btn>${IconTemplate()}</amadeus-hos-res-ct-icon-btn>
*/
amadeus-hos-res-ct-icon-btn {
    display: inline-block;
    position: relative;
    height: $icon-btn-height-lg;
    width: $icon-btn-width-lg;
    border-radius: 100%;
    background-color: $supporting-button-bg-color;

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

    svg {
        fill: $supporting-button-text-color;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

/**
*  Custom tag and its styles for 'arrow buttons'
*  Use below tag in your application
*  <amadeus-hos-res-ct-arrow-btn>${IconTemplate()}</amadeus-hos-res-ct-arrow-btn>
*/
amadeus-hos-res-ct-arrow-btn {
    display: inline-block;
    position: relative;
    height: $arrow-btn-height-lg;
    width: $arrow-btn-width-lg;
    background-color: $supporting-button-bg-color;

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

    svg {
        fill: $supporting-button-text-color;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

/**
*  Custom tag and its styles for 'Add another room'
*  Use below tag in your application
*  <amadeus-hos-res-ct-add-room>${AddIconTemplate()} Add another room</amadeus-hos-res-ct-add-room>
*/
amadeus-hos-res-ct-add-room {
    display: inline-block;
    font-size: convertPxToRem(12px);
    font-weight: $font-weight-bold;
    letter-spacing: $body-text-links-letter-spacing;
    color: $body-text-links-color;
    word-break: break-word;
    text-transform: uppercase;
    cursor: pointer;

    svg {
        fill: $body-text-links-color;
        margin-right: 6px;
        margin-top: -2px;
        g {
            g {
                stroke: $body-text-links-color;
            }
        }
    }
}

/**
*  Custom tag and its styles for 'start over'
*  Use below tag in your application
*  <amadeus-hos-res-ct-start-over>${StartOverIconTemplate()} Start over</amadeus-hos-res-ct-start-over>
*/
amadeus-hos-res-ct-start-over {
    display: inline-block;
    font-size: $small-text-font-size;
    color: $supporting-button-bg-color;
    font-weight: $font-weight-bold;

    svg {
        fill: $supporting-button-bg-color;
        margin-right: 5px;
        margin-top: -2px;
    }
}

/**
*  Custom tag and its styles for 'link button - more info (info icon)'
*  Use below tag in your application
*  <amadeus-hos-res-ct-more-info>${InfoIconTemplate()}</amadeus-hos-res-ct-more-info>
*/
amadeus-hos-res-ct-more-info {
    display: inline-block;
    cursor: pointer;

    svg {
        fill: $body-text-links-color;
        margin-top: -2px;
    }

    .info-solid-a {
        fill: $body-text-links-color;
    }

    .info-solid-b {
        fill: $rooms-rates-bg;
    }
}

/**
*  Custom tag and its styles for 'link button - edit (edit icon)'
*  Use below tag in your application
*  <amadeus-hos-res-ct-edit>${EditIconTemplate()}</amadeus-hos-res-ct-edit>
*/
amadeus-hos-res-ct-edit {
    display: inline-block;
    cursor: pointer;

    svg {
        fill: $body-text-links-color;
    }
}

/**
*  Custom tag and its styles for 'link button - delete (delete icon)'
*  Use below tag in your application
*  <amadeus-hos-res-ct-delete>${DeleteIconTemplate()}</amadeus-hos-res-ct-delete>
*/
amadeus-hos-res-ct-delete {
    display: inline-block;
    cursor: pointer;

    svg {
        fill: $inline-error-message-text;
    }
}

/**
*  Custom tag and its styles for 'amenities icons'
*  Use below tag in your application
*  <amadeus-hos-res-ct-amenity-icon>${AmenityIconTemplate()}</amadeus-hos-res-ct-amenity-icon>
*/
amadeus-hos-res-ct-amenity-icon {
    display: inline-block;
    margin-right: 20px;
    height: 24px;
    width: 24px;
    position: relative;

    svg,
    path {
        fill: $iconography-color;

        &:hover {
            fill: $iconography-hover-color-darkened-15;
        }
    }

    img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

/**
*  Custom tag and its styles for 'secure logo'
*  Use below tag in your application
*  <amadeus-hos-res-ct-secure-logo>${SecuredIconTemplate()}</amadeus-hos-res-ct-secure-logo>
*/
// amadeus-hos-res-ct-secure-logo {
//     svg {
//         path {
//             fill: $secure-logo-color;
//         }
//         text {
//             fill: $secure-logo-color;
//             font-size: convertPxToRem(11px);
//             font-weight: $font-weight-bold;
//             font-style: italic;
//             letter-spacing: 0.05em;
//         }
//     }
// }

/**
*  Styles for 'room/rate/package/booking summary details modal close icon'
*  Use below classes for room/rate/package/booking summary details modal close icon
*  in your application
*  <amadeus-hos-res-wc-modal>
        <div class="amadeus-hos-res-cn-details-modal_body-slot" slot="modal-body-slot"></div>
*  </amadeus-hos-res-wc-modal>
*/
.amadeus-hos-res-cn-details-modal {
    &_body-slot {
        position: relative;

        .modal-close-icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 24px;
            top: 17px;
            cursor: pointer;
            z-index: 1301;

            .close-icon svg {
                fill: $title-3-color;
                stroke: $title-3-color;
                height: 16px;
                width: 16px;
            }
        }

        .full-screen-close-icon {
            top: 22px;
            right: 22px;

            .close-icon svg {
                fill: $supporting-button-text-color;
                stroke: $supporting-button-text-color;
                height: 16px;
                width: 16px;
            }
        }
    }
}

/*************************************************************************************/
/**
* Media Queries
*/
/**
*  media query for max-width 992px
*/
@include amadeusHosResWcMediaBreakpointDown(md) {
    /*Styles for 'amenities icons'*/
    amadeus-hos-res-ct-amenity-icon {
        height: 20px;
        width: 20px;
    }

    /*Styles for 'secure logo'*/
    amadeus-hos-res-ct-secure-logo {
        svg {
            text {
                font-size: convertPxToRem(9px);
            }
        }
    }

    /*Styles for 'for room/rate/package/booking summary details modal close icon'*/
    .amadeus-hos-res-cn-details-modal {
        &_body-slot {
            .modal-close-icon {
                top: 9px;
                right: 16px;

                .close-icon svg {
                    height: 12px;
                    width: 12px;
                }
            }

            .full-screen-close-icon {
                top: 12px;
                right: 13px;
            }
        }
    }

    /* Styles for 'icon-buttons' */
    amadeus-hos-res-ct-icon-btn {
        height: $icon-btn-height-md;
        width: $icon-btn-width-md;
    }

    /* Styles for 'arrow-buttons' */
    amadeus-hos-res-ct-arrow-btn {
        height: $arrow-btn-height-md;
        width: $arrow-btn-width-md;
    }
}

/**
* Media Queries for pixel density
*/
@include webkitDevicePixelRatio(1) {
    /**
    *  media query for max-width 992px
    */
    @include amadeusHosResWcMediaBreakpointDown(md) {
        /*Styles for 'amenities icons'*/
        amadeus-hos-res-ct-amenity-icon {
            height: 20px;
            width: 20px;
        }

        /*Styles for 'secure logo'*/
        amadeus-hos-res-ct-secure-logo {
            svg {
                text {
                    font-size: convertPxToRem(9px);
                }
            }
        }

        /*Styles for 'for room/rate/package/booking summary details modal close icon'*/
        .amadeus-hos-res-cn-details-modal {
            &_body-slot {
                .modal-close-icon {
                    top: 9px;
                    right: 16px;

                    .close-icon svg {
                        height: 12px;
                        width: 12px;
                    }
                }

                .full-screen-close-icon {
                    top: 12px;
                    right: 13px;
                }
            }
        }

        /* Styles for 'icon-buttons' */
        amadeus-hos-res-ct-icon-btn {
            height: $icon-btn-height-md;
            width: $icon-btn-width-md;
        }

        /* Styles for 'arrow-buttons' */
        amadeus-hos-res-ct-arrow-btn {
            height: $arrow-btn-height-md;
            width: $arrow-btn-width-md;
        }
    }
}