/**
*  Custom tag and its styles for 'title-1'
*  Use below tag in your application
*  <amadeus-hos-res-ct-title-1> Title 1 </amadeus-hos-res-ct-title-1>
*/
amadeus-hos-res-ct-title-1 {
    display: block;
    color: $title-1-color;
    font-weight: $title-1-font-weight;
    font-size: $title-1-font-size;
    word-break: break-word;
}

/**
*  Custom tag and its styles for 'title-2'
*  Use below tag in your application
*  <amadeus-hos-res-ct-title-2> Title 2 </amadeus-hos-res-ct-title-2>
*/
amadeus-hos-res-ct-title-2 {
    display: block;
    color: $title-2-color;
    font-weight: $title-2-font-weight;
    font-size: $title-2-font-size;
    word-break: break-word;
}

/**
*  Custom tag and its styles for 'title-3'
*  Use below tag in your application
*  <amadeus-hos-res-ct-title-3> Title 3 </amadeus-hos-res-ct-title-3>
*  For text truncation after three lines (This doesn't support screen reader)
*  <amadeus-hos-res-ct-title-3 class="text-truncate-after-2-lines"> Body text </amadeus-hos-res-ct-title-3>
*  To support screen reader use below classes for text truncation after three lines
*  <amadeus-hos-res-ct-title-3 class="text-truncate text-truncate-line-clamp-3"> Body text </amadeus-hos-res-ct-title-3>
*/
amadeus-hos-res-ct-title-3 {
    display: block;
    color: $title-3-color;
    font-weight: $title-3-font-weight;
    font-size: $title-3-font-size;
    word-break: break-word;

    &.text-truncate-after-2-lines {
        overflow: hidden;
        position: relative;
        max-height: 54px;
        line-height: 27px;
        text-align: left;
        margin-right: -1em;
        padding-right: 1em;
        white-space: normal;
        width: 100%;

        &:before {
            content: "...";
            position: absolute;
            right: 0;
            bottom: 0;
        }

        &:after {
            content: "";
            position: absolute;
            right: 0;
            width: 1em;
            height: 1em;
            margin-top: 0.2em;
            background: $rooms-rates-bg;
        }
    }
    &.text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        display: -moz-box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        white-space: normal;
        &.text-truncate-line-clamp-2 {
            -webkit-line-clamp: 2;
        }
        &.text-truncate-line-clamp-3 {
            -webkit-line-clamp: 3;
        }
        &.text-truncate-line-clamp-4 {
            -webkit-line-clamp: 4;
        }
        &.text-truncate-line-clamp-5 {
            -webkit-line-clamp: 5;
        }
    }
}

/**
*  Custom tag and its styles for 'title-4'
*  Use below tag in your application
*  <amadeus-hos-res-ct-title-4> Title 4 </amadeus-hos-res-ct-title-4>
*  For text truncation after two lines (This doesn't support screen reader)
*  <amadeus-hos-res-ct-title-4 class="text-truncate-after-2-lines"> Body text </amadeus-hos-res-ct-title-4>
*  To support screen reader use below classes for text truncation after two lines
*  <amadeus-hos-res-ct-title-4 class="text-truncate text-truncate-line-clamp-2"> Body text </amadeus-hos-res-ct-title-4>
*/
amadeus-hos-res-ct-title-4 {
    display: block;
    color: $title-4-color;
    font-weight: $title-4-font-weight;
    font-size: $title-4-font-size;
    word-break: break-word;

    &.text-truncate-after-2-lines {
        overflow: hidden;
        position: relative;
        max-height: 44px;
        line-height: 22px;
        text-align: left;
        margin-right: -1em;
        padding-right: 1em;
        white-space: normal;
        width: 100%;

        &:before {
            content: "...";
            position: absolute;
            right: 0;
            bottom: 0;
        }

        &:after {
            content: "";
            position: absolute;
            right: 0;
            width: 1em;
            height: 1em;
            margin-top: 0.2em;
            background: $box-background-color;
        }
    }
    &.text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        display: -moz-box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        white-space: normal;
        &.text-truncate-line-clamp-2 {
            -webkit-line-clamp: 2;
        }
        &.text-truncate-line-clamp-3 {
            -webkit-line-clamp: 3;
        }
        &.text-truncate-line-clamp-4 {
            -webkit-line-clamp: 4;
        }
        &.text-truncate-line-clamp-5 {
            -webkit-line-clamp: 5;
        }
    }
}

/**
*  Custom tag and its styles for 'title-5'
*  Use below tag in your application
*  <amadeus-hos-res-ct-title-5> Title 5 </amadeus-hos-res-ct-title-5>
*/
amadeus-hos-res-ct-title-5 {
    display: block;
    color: $title-5-color;
    font-weight: $title-5-font-weight;
    font-size: $title-5-font-size;
    word-break: break-word;
    text-transform: uppercase;
}

/*************************************************************************************/
/**
* Media Queries
*/
/**
*  media query for max-width 992px
*/
@include amadeusHosResWcMediaBreakpointDown(md) {
    amadeus-hos-res-ct-title-1 {
        font-size: convertPxToRem(20px);
    }

    amadeus-hos-res-ct-title-2 {
        font-size: convertPxToRem(18px);
    }

    /*Styles for 'amadeus-hos-res-ct-title-3 -  For text truncation after two lines'*/
    amadeus-hos-res-ct-title-3 {
        font-size: convertPxToRem(16px);
        &.text-truncate-after-2-lines {
            max-height: 38px;
            line-height: 19px;
        }
    }

    /*Styles for 'amadeus-hos-res-ct-title-4 -  For text truncation after two lines'*/
    amadeus-hos-res-ct-title-4 {
        font-size: convertPxToRem(14px);
        &.text-truncate-after-2-lines {
            max-height: 36px;
            line-height: 18px;
        }
    }

    amadeus-hos-res-ct-title-5 {
        font-size: convertPxToRem(12px);
    }
}

/**
* Media Queries for pixel density
*/
@include webkitDevicePixelRatio(1) {
    /**
    *  media query for max-width 992px
    */
    @include amadeusHosResWcMediaBreakpointDown(md) {
        amadeus-hos-res-ct-title-1 {
            font-size: convertPxToRem(20px);
        }

        amadeus-hos-res-ct-title-2 {
            font-size: convertPxToRem(18px);
        }

        /*Styles for 'amadeus-hos-res-ct-title-3 -  For text truncation after two lines'*/
        amadeus-hos-res-ct-title-3 {
            font-size: convertPxToRem(16px);
            &.text-truncate-after-2-lines {
                max-height: 38px;
                line-height: 19px;
            }
        }

        /*Styles for 'amadeus-hos-res-ct-title-4 -  For text truncation after two lines'*/
        amadeus-hos-res-ct-title-4 {
            font-size: convertPxToRem(14px);
            &.text-truncate-after-2-lines {
                max-height: 36px;
                line-height: 18px;
            }
        }

        amadeus-hos-res-ct-title-5 {
            font-size: convertPxToRem(12px);
        }
    }
}