.is-mock{
    display:none;
}
.is-mock.is-block{
    display:block !important;
}
.is-mock.is-hidden{
    display:none !important;
}
.is-mock.is-inline{
    display:inline !important;
}
.is-mock.is-inline-block{
    display:inline-block !important;
}
.is-mock.is-flex{
    display:flex !important;
}

.demo-bar{
    background-color: #e86e6e;
    border: 1px solid #e86e6e;
    padding: 0.5em 0.5em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #fff;
    border-radius: 0.33em;
    >.inner{
        position: relative;
        >.text{
            position: relative;
            padding: 0 2em 0 4.5em;
            &:before{
                content: "DEMO";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.9em;
                background: #fff;
                color: #e86e6e;
                border-radius: 1em;
                padding: 0.1em 0.5em;
                font-weight: bold;
            }
        }
        >.button{
            position: absolute;
            top: 0;
            right: 0.5em;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            a{
                color: #eee;
                &:hover{
                    color: #fff;
                }
            }
        }
    }
}
body.login{
    .demo-bar{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        width: 100%;
        box-sizing: border-box;
        padding: 0.5em 1em;
    }
}