//
// Common control styles
// --------------------------------------------------

//
// The scroll panel can host a scrollbar control. It has a right border that covers 
// the scrollbar to satisfy the design requirements.
//
.control-scrollpanel {
    position: relative;
    background: @color-panel-light;

    .control-scrollbar {
        &.vertical > .scrollbar-scrollbar {right: 0;}
    }
}

.tooltip {
    .tooltip-inner {
        text-align: left;
        padding: 5px 8px;
    }

    &.in {
        .opacity(1);
    }
}

//
// Logos
//

.oc-logo-white {
    background-image: url(../images/october-logo-white.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.oc-logo {
    background-image: url(../images/october-logo.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.layout.control-tabs.oc-logo-transparent:not(.has-tabs),
.flex-layout-column.oc-logo-transparent:not(.has-tabs),
.layout-cell.oc-logo-transparent {
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-image: url(../images/october-logo.svg);
    background-position: 50% 50%;
    position: relative;

    &:after {
        content: '';
        display: table-cell;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(249,249,249,0.7);
    }
}