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

.iot-navigation-out{
    width: 100%;
    height: auto;
    overflow: hidden;
    .iot-navigation{
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        width: var(--card-width-size);
        height: auto;
        margin: var(--card-margin-size);
        padding: var(--navigation-padding-TD);
        overflow: hidden;
        background: var(--card-bg-color);
        border: var(--card-border);
        border-radius: var(--card-border-radius-size);
        .iot-navigation-content{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 25%;
            &>p{
                margin: var(--navigation-text-margin);
                color:#999;
                font-size: var(--enum-text-font-size);
                line-height: var(--enum-text-font-size);
            }
            .navigation-entry-enum-icon {
                display: flex;
                flex: 0 0 var(--icon-width-size);
                flex-direction: row;
                align-items: center;
                justify-content: center;
                width: var(--icon-width-size);
                height: var(--icon-height-size);
                border-radius: 50%;
                cursor: pointer;
                .navigation-entry-enum-icon-image {
                    display: inline-block;
                    width: var(--icon-inside-width);
                    height: var(--icon-inside-height);
                    font-size: var(--icon-inside-font-size);
                }
            }
            .default{
                color: var(--icon-inside-color);
                background: var(--icon-bg-color);
            }
            .active{
                color: var(--icon-inside-active-color);
                background: var(--icon-inside-color);
            }
            .disabled{
                position: absolute;
                width: calc(var(--icon-width-size) + 0.13rem);
                height: calc(var(--icon-height-size) + var(--enum-text-font-size) + 0.1rem);
                background-color: var(--disable-bg-color);
            }
        }
    }
    .foot{
        width: 100%;
        margin: 0;
        border-radius: 0;
      }
}