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

    &:after {
        content: "\0020 \2192";
    }

    &:hover {
        color: $link-hover-color;
    }

    &:focus {
        color: $link-hover-color;
    }

    &.hide-after-arrow-content:after {
        content: "";
    }

    &.text-truncate-after-3-lines {
        overflow: hidden;
        position: relative;
        max-height: 57px;
        line-height: 19px;
        text-align: justify;
        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 'small links'
*  Use below tag in your application
*  <amadeus-hos-res-ct-small-link> Small link text </amadeus-hos-res-ct-small-link>
*  For text truncation after three lines (This doesn't support screen reader)
*  <amadeus-hos-res-ct-small-link class="text-truncate-after-3-lines"> Body text </amadeus-hos-res-ct-small-link>
*  To support screen reader use below classes for text truncation after three lines
*  <amadeus-hos-res-ct-small-link class="text-truncate text-truncate-line-clamp-3"> Body text </amadeus-hos-res-ct-small-link>
*/
amadeus-hos-res-ct-small-link {
    display: inline-block;
    font-size: $small-text-links-font-size;
    font-weight: $small-text-links-font-weight;
    letter-spacing: $small-text-links-letter-spacing;
    color: $body-text-links-color;
    word-break: break-word;
    cursor: pointer;

    &:after {
        content: "\0020 \2192";
    }

    &:hover {
        color: $link-hover-color;
    }

    &:focus {
        color: $link-hover-color;
    }

    &.text-truncate-after-3-lines {
        overflow: hidden;
        position: relative;
        max-height: 54px;
        line-height: 18px;
        text-align: justify;
        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;
        }
    }
}

/*************************************************************************************/
/**
* Media Queries
*/
/**
*  media query for max-width 992px
*/
@include amadeusHosResWcMediaBreakpointDown(md) {
    /*Styles for 'link text -  For text truncation after three lines'*/
    amadeus-hos-res-ct-link {
        font-size: convertPxToRem(14px);

        &.text-truncate-after-3-lines {
            max-height: 54px;
            line-height: 18px;
        }
    }

    /*Styles for 'small link text -  For text truncation after three lines'*/
    amadeus-hos-res-ct-small-link {
        font-size: convertPxToRem(12px);

        &.text-truncate-after-3-lines {
            max-height: 48px;
            line-height: 16px;
        }
    }
}

/**
* Media Queries for pixel density
*/
@include webkitDevicePixelRatio(1) {
    /**
    *  media query for max-width 992px
    */
    @include amadeusHosResWcMediaBreakpointDown(md) {
        /*Styles for 'link text -  For text truncation after three lines'*/
        amadeus-hos-res-ct-link {
            font-size: convertPxToRem(14px);

            &.text-truncate-after-3-lines {
                max-height: 54px;
                line-height: 18px;
            }
        }

        /*Styles for 'small link text -  For text truncation after three lines'*/
        amadeus-hos-res-ct-small-link {
            font-size: convertPxToRem(12px);

            &.text-truncate-after-3-lines {
                max-height: 48px;
                line-height: 16px;
            }
        }
    }
}