/**
*  Custom tag and its styles for 'big rates'
*  Use below tag in your application
* <amadeus-hos-res-ct-big-rate>$ 123</amadeus-hos-res-ct-big-rate>
*/
amadeus-hos-res-ct-big-rate {
    display: block;
    font-size: $big-rate-font-size;
    font-weight: $big-rate-font-weight;
    letter-spacing: $big-rate-letter-spacing;
    color: $big-rate-color;
    white-space: nowrap;
}

/**
*  Custom tag and its styles for 'small rates'
*  Use below tag in your application
* <amadeus-hos-res-ct-small-rate>$ 123</amadeus-hos-res-ct-small-rate>
*/
amadeus-hos-res-ct-small-rate {
    display: inline-block;
    font-size: $small-rate-font-size;
    font-weight: $small-rate-font-weight;
    letter-spacing: $small-rate-letter-spacing;
    color: $big-rate-color;
    white-space: nowrap;
}

/**
*  Custom tag and its styles for 'tiny rates'
*  Use below tag in your application
* <amadeus-hos-res-ct-tiny-rate>$ 123</amadeus-hos-res-ct-tiny-rate>
*/
amadeus-hos-res-ct-tiny-rate {
    display: inline-block;
    font-size: $tiny-rate-font-size;
    font-weight: $tiny-rate-font-weight;
    letter-spacing: $tiny-rate-letter-spacing;
    color: $big-rate-color;
    white-space: nowrap;
}

/**
*  Custom tag and its styles for 'strikethrough rate(big)'
*  Use below tag in your application
*  <amadeus-hos-res-ct-strikethrough-rate>$ 123</amadeus-hos-res-ct-strikethrough-rate>
*  Note - In case of strikethrough rates, always use
*  'amadeus-hos-res-ct-big-rate/small-rate' as an adjacent sibling to 'amadeus-hos-res-ct-strikethrough-rate/small-strikethrough-rate'
*/
amadeus-hos-res-ct-strikethrough-rate {
    display: inline-block;
    font-size: $big-rate-strikethrough-font-size;
    font-weight: $big-rate-strikethrough-font-weight;
    letter-spacing: $big-rate-strikethrough-letter-spacing;
    color: $big-rate-strikethrough-color;
    text-decoration: line-through;
    white-space: nowrap;

    + amadeus-hos-res-ct-big-rate,
    + amadeus-hos-res-ct-small-rate,
    + amadeus-hos-res-ct-tiny-rate {
        --amadeus-hos-res-cv-rate-color: #{$promotions-bg-color};
    }
}

/**
*  Custom tag and its styles for 'small strikethrough rate'
*  Use below tag in your application
*  <amadeus-hos-res-ct-small-strikethrough-rate>$ 545</amadeus-hos-res-ct-small-strikethrough-rate>
*  Note - In case of strikethrough rates, always use
* 'amadeus-hos-res-ct-big-rate/small-rate' as an adjacent sibling to 'amadeus-hos-res-ct-strikethrough-rate/small-strikethrough-rate'
*/
amadeus-hos-res-ct-small-strikethrough-rate {
    display: inline-block;
    font-size: $small-rate-strikethrough-font-size;
    font-weight: $small-rate-strikethrough-font-weight;
    letter-spacing: $small-rate-strikethrough-letter-spacing;
    color: $big-rate-strikethrough-color;
    text-decoration: line-through;
    white-space: nowrap;

    + amadeus-hos-res-ct-big-rate,
    + amadeus-hos-res-ct-small-rate,
    + amadeus-hos-res-ct-tiny-rate {
        --amadeus-hos-res-cv-rate-color: #{$promotions-bg-color};
    }
}

/**
*  Custom tag and its styles for 'tiny strikethrough rate'
*  Use below tag in your application
*  <amadeus-hos-res-ct-tiny-strikethrough-rate>$ 545</amadeus-hos-res-ct-tiny-strikethrough-rate>
*  Note - In case of strikethrough rates, always use
* 'amadeus-hos-res-ct-big-rate/tiny-rate' as an adjacent sibling to 'amadeus-hos-res-ct-strikethrough-rate/tiny-strikethrough-rate'
*/
amadeus-hos-res-ct-tiny-strikethrough-rate {
    display: inline-block;
    font-size: $tiny-rate-strikethrough-font-size;
    font-weight: $tiny-rate-strikethrough-font-weight;
    letter-spacing: $tiny-rate-strikethrough-letter-spacing;
    color: $big-rate-strikethrough-color;
    text-decoration: line-through;
    white-space: nowrap;

    + amadeus-hos-res-ct-big-rate,
    + amadeus-hos-res-ct-small-rate,
    + amadeus-hos-res-ct-tiny-rate {
        --amadeus-hos-res-cv-rate-color: #{$promotions-bg-color};
    }
}

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

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

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

    amadeus-hos-res-ct-strikethrough-rate {
        font-size: convertPxToRem(16px);
    }

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

    amadeus-hos-res-ct-tiny-strikethrough-rate {
        font-size: convertPxToRem(10px);
    }
}

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

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

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

        amadeus-hos-res-ct-strikethrough-rate {
            font-size: convertPxToRem(16px);
        }

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

        amadeus-hos-res-ct-tiny-strikethrough-rate {
            font-size: convertPxToRem(10px);
        }
    }
}