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

    &.text-truncate-after-2-lines,
    &.text-truncate-after-4-lines,
    &.text-truncate-after-5-lines {
        overflow: hidden;
        position: relative;
        max-height: 38px;
        line-height: 19px;
        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-after-4-lines {
        max-height: 76px;
        line-height: 19px;
    }

    &.text-truncate-after-5-lines {
        max-height: 95px;
        line-height: 19px;
    }
    &.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;
        }
    }
    &.text-disabled {
        color: $disabled-button-bg-color;
    }
}

/**
*  Custom tag and its styles for 'small text'
*  Use below tag in your application
* <amadeus-hos-res-ct-small-text> Small text </amadeus-hos-res-ct-small-text>
*/
amadeus-hos-res-ct-small-text {
    display: inline-block;
    color: $default-body-text-color;
    font-size: $small-text-font-size;
    font-weight: $small-text-font-weight;
    letter-spacing: $small-text-letter-spacing;
    word-break: break-word;
}

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

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

        .text-truncate-after-4-lines {
            max-height: 72px;
            line-height: 18px;
        }

        //for mobiles, this text is truncated after 3 lines
        &.text-truncate-after-5-lines {
            max-height: 54px;
            line-height: 18px;
        }
    }

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

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

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

            .text-truncate-after-4-lines {
                max-height: 72px;
                line-height: 18px;
            }

            //for mobiles, this text is truncated after 3 lines
            &.text-truncate-after-5-lines {
                max-height: 54px;
                line-height: 18px;
            }
        }

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