@pref: Twilio-ConnectionBar;

.@{pref} {
    position: absolute;
    width: 100%;
    z-index: 10;
}

@connection-bar-height: 28px;

.@{pref}-enter {
    height: 0px;
}

.@{pref}-enter.@{pref}-enter-active {
    height: @connection-bar-height;
    transition: height 300ms ease-in;
}

.@{pref}-leave {
    height: @connection-bar-height;
}

.@{pref}-leave.@{pref}-leave-active {
    height: 0px;
    transition: height 300ms ease;
}

.@{pref}-Container {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height: @connection-bar-height;
    text-align: center;
    word-wrap: break-word;
    overflow: hidden;
    opacity: 0.9;
    background-color: #ffffff;
    color: #666666;
}

.@{pref}-LowerLine{
    height: 2px;
}

.@{pref}-Text {
    margin: auto;
    margin-left: 4px;
    font-size: 12px;
}

.@{pref}-Connecting {
    .@{pref}-LowerLine {
        background-color: #ff9800;
    }
}

.@{pref}-Disconnecting {

    .@{pref}-LowerLine {
        background-color: #c0192d;
    }
}