@import '../../base/style.less';

.iot-bottom-slide {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    background: var(--bottom-slider-bg);

    .iot-bottom-layer {
        transition: all .5s;
        overflow: hidden;
        padding-bottom: var(--page-margin-down);
        position: fixed;
        left: 0;
        bottom: var(--page-default-btm-size);
        width: 100%;
        max-height: var(--page-max-height-size);
        border-radius: var(--page-border-radius);
        background: #fff;
        .top {
            position: relative;
            width: 100%;
            height: var(--pagetitle-font-height);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--pagetitle-font-family);
            font-size: var(--pagetitle-font-size);
            color:var(--pagetitle-font-color);
        
            .left {
                font-family: var(--button-font-family);
                color: var(--button-left-font-color);
                width: auto;
                position: absolute;
                left:var(--buttonL-margin-left);
                top: var(--button-margin-top);
                line-height:var(--button-line-height);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .left-show{
                width: 60%;
                text-overflow: ellipsis;
                font-family: var(--pagetitle-font-family);
                font-size: var(--pagetitle-font-size);
                color:var(--pagetitle-font-color);
                position: absolute;
                left:var(--buttonL-margin-left);
                // top: var(--button-margin-top);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .middle-show{
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .middles{
                width: 50%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
            }
            .right {
                font-family: var(--button-font-family);
                color: var(--button-right-font-color);
                line-height:var(--button-line-height);
                width: auto;
                position: absolute;
                right:var(--buttonR-margin-right);
                top: var(--button-margin-top);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .iot-bottom-context {
            // background: red;
            overflow-y: scroll;
            width: 100%;
            max-height: 4.5rem;
        }
    }

}