/**
*  Styles for 'box - in expanded view of a component'
*  Use below classes for box - in expanded view of a room-list/rate-list component
*  in your application
* <div class="container-fluid rate-list-wrapper/room-list-wrapper/package-list-wrapper amadeus-hos-res-cn-expanded-box">
    <div class="box-top-gradient"></div>
    <div class="row m-0 rate-row">
        <div class="col-12 rate-col selected"></div>
    </div>
    <div class="row collapse-rate-list collapse-expanded-box">
        <span>${CaretIconTemplate()}</span>
        <span>Close</span>
    </div>
* </div>
*/
.amadeus-hos-res-cn-expanded-box {
    background: $box-background-color;

    .box-top-gradient {
        height: 16px;
        background: transparent linear-gradient(180deg, $box-body-text-color 0%, transparent 100%) 0% 0% no-repeat
            padding-box;
        opacity: 0.09;
    }

    .collapse-expanded-box {
        font-size: convertPxToRem(15px);
        font-weight: $font-weight-regular;
        letter-spacing: 0.03px;
        @include amadeusHosResWcBorder(1px, true, 0, 0, 0);
        border-color: $borders-color;
        word-break: break-word;
        padding: 12px;
        min-height: 48px;
        height: auto;
        text-transform: capitalize;
        color: $box-body-text-color;

        svg {
            fill: $box-body-text-color;
            margin-right: 3px;
            width: 24px;
            height: 20px;
            margin-top: 1px;
            transform: rotate(180deg);
            cursor: pointer;
        }

        span {
            cursor: pointer;
        }
    }

    hr {
        @include amadeusHosResWcBorder(1px, true, 0, 0, 0);
        border-color: $box-borders-color;
        margin: 0;
    }

    .selected {
        border: 1px solid $body-text-links-color;
        background: $selected-card-background-color;

        hr {
            border-color: transparent;
        }

        + div {
            hr {
                border-color: transparent;
            }
        }
        amadeus-hos-res-ct-title-4 {
            &.text-truncate-after-2-lines:after {
                background: $selected-card-background-color;
            }
        }
        amadeus-hos-res-ct-body-text {
            &.text-truncate-after-2-lines:after {
                background: $selected-card-background-color;
            }
        }
    }

    amadeus-hos-res-ct-more-info {
        svg {
            fill: $box-link-color;
        }
        .info-solid-b {
            fill: $box-background-color;
        }
    }

    // change radio button color association when it has box-bg as background color
    amadeus-hos-res-ct-radio-btn {
        .amadeus-hos-res-cn-radio-btn input {
            &:checked ~ .amadeus-hos-res-cn-radio-btn_indicator {
                background: $box-link-color;
            }

            &:checked:focus ~ .amadeus-hos-res-cn-radio-btn_indicator {
                background: $box-link-color;
            }
        }

        .amadeus-hos-res-cn-radio-btn_indicator {
            border: 1px solid $box-link-color;
        }
    }
}

/*************************************************************************************/
/**
* Media Queries
*/
/**
*  media query for max-width 992px
*/
@include amadeusHosResWcMediaBreakpointDown(md) {
    /* Styles for 'box - in expanded view of a component' */
    .amadeus-hos-res-cn-expanded-box {
        .collapse-expanded-box {
            font-size: convertPxToRem(14px);
            letter-spacing: 0px;

            svg {
                width: 22px;
                height: 15px;
            }
        }
    }
}

/**
* Media Queries for pixel density
*/
@include webkitDevicePixelRatio(1) {
    /**
    *  media query for max-width 992px
    */
    @include amadeusHosResWcMediaBreakpointDown(md) {
        /* Styles for 'box - in expanded view of a component' */
        .amadeus-hos-res-cn-expanded-box {
            .collapse-expanded-box {
                font-size: convertPxToRem(14px);
                letter-spacing: 0px;

                svg {
                    width: 22px;
                    height: 15px;
                }
            }
        }
    }
}