/**
*  Custom tag and its styles for 'limited inventory tag'
*  Use below tag in your application
*  Refer below given classes for 'amadeus-hos-res-ct-limited-inventory' wrapper.
* <amadeus-hos-res-ct-limited-inventory>
        <amadeus-hos-res-ct-body-text class="tag"> In high demand </amadeus-hos-res-ct-body-text>
        <amadeus-hos-res-ct-small-text class="text"> Only 3 rooms left! </amadeus-hos-res-ct-small-text>
  </amadeus-hos-res-ct-limited-inventory>
*/
amadeus-hos-res-ct-limited-inventory {
    display: flex;
    align-items: center;
    .tag {
        background-color: $limited-inventory-bg-color;
        color: $label-text-color;
        font-size: getFontSizeByPercentage($body-font-size, 75);
        font-weight: $font-weight-bold;
        padding: 4px 8px;
        margin-right: 8px;
    }
    .text {
        color: $limited-inventory-bg-color;
        font-weight: $font-weight-regular;
    }
}

/*************************************************************************************/
/**
* Media Queries
*/
/**
*  media query for max-width 992px
*/
@include amadeusHosResWcMediaBreakpointDown(md) {
    /* Styles for 'limited inventory tag' */
    amadeus-hos-res-ct-limited-inventory {
        .tag {
            margin-right: 10px;
        }
        .text {
            font-size: convertPxToRem(12px);
        }
    }
}

/**
* Media Queries for pixel density
*/
@include webkitDevicePixelRatio(1) {
    /**
    *  media query for max-width 992px
    */
    @include amadeusHosResWcMediaBreakpointDown(md) {
        /* Styles for 'limited inventory tag' */
        amadeus-hos-res-ct-limited-inventory {
            .tag {
                margin-right: 10px;
            }
            .text {
                font-size: convertPxToRem(12px);
            }
        }
    }
}