/**
*  Custom tag and its styles for 'room configuration'
*  Use below tag in your application
*  <amadeus-hos-res-ct-room-config class="amadeus-hos-res-cn-bedding-config">
        <p class="config-label d-none d-lg-block">Config label (e.g. Max capacity)</p>
        <div class="config-item">
            <span class="d-none d-lg-block">${ConfigIconTemplate()}</span>
            <span>Config label</span>
        </div>
    </amadeus-hos-res-ct-room-config>
*/
amadeus-hos-res-ct-room-config {
    display: inline-block;
    margin-right: 30px;
    margin-top: 16px;

    &.amadeus-hos-res-cn-bedding-config {
        p.config-label {
            font-size: convertPxToRem(13px);
            font-weight: $font-weight-bold;
            letter-spacing: 0;
            color: $default-body-text-color;
            margin-bottom: 9px;
            word-break: break-word;
        }

        .config-item {
            display: inline-flex;
            font-size: convertPxToRem(15px);
            font-weight: $font-weight-regular;
            letter-spacing: 0.03px;
            color: $default-body-text-color;
            word-break: break-word;

            svg {
                margin-right: 5px;
                fill: $default-body-text-color;
                margin-top: -4px;
            }
        }
    }
}

/*************************************************************************************/
/**
* Media Queries
*/
/**
*  media query for max-width 992px
*/
@include amadeusHosResWcMediaBreakpointDown(md) {

    /*Styles for 'bedding config'*/
    amadeus-hos-res-ct-room-config {
        &.amadeus-hos-res-cn-bedding-config {
            margin-right: 0;
            margin-top: 10px;

            &:after {
                content: "|";
                margin-left: 4px;
                margin-right: 6px;
                color: $default-body-text-color;
            }

            &:last-child {
                &:after {
                    content: "";
                }
            }

            .config-item {
                font-size: convertPxToRem(14px);
                letter-spacing: 0.08px;
            }
        }
    }
}

/**
* Media Queries for pixel density
*/
@include webkitDevicePixelRatio(1) {

    /**
    *  media query for max-width 992px
    */
    @include amadeusHosResWcMediaBreakpointDown(md) {

        /*Styles for 'bedding config'*/
        amadeus-hos-res-ct-room-config {
            &.amadeus-hos-res-cn-bedding-config {
                margin-right: 0;
                margin-top: 10px;

                &:after {
                    content: "|";
                    margin-left: 4px;
                    margin-right: 6px;
                    color: $default-body-text-color;
                }

                &:last-child {
                    &:after {
                        content: "";
                    }
                }

                .config-item {
                    font-size: convertPxToRem(14px);
                    letter-spacing: 0.08px;
                }
            }
        }
    }
}