/* Styles for sub-dividing views generically */
.l-control-bar {
    // Element that can be placed above l-view-section, holds controls, buttons, etc.
    height: $controlBarH;
}

.l-view-section {
	@include absPosDefault(0);
	h2 {
		color: #fff;
		margin-bottom: $interiorMargin;
	}
	&.fixed {
		font-size: 0.8em;
	}
	.controls,
	label,
	.inline-block {
		display: inline-block;
	}
}

.has-control-bar {
    .l-view-section {
        top: $controlBarH + $interiorMargin;
    }
}


.child-frame {
    .has-control-bar {
        $btnExportH: $btnFrameH;
        .l-control-bar {
            @include trans-prop-nice(opacity, $dur: 50ms);
            opacity: 0;
        }
        .l-view-section {
            @include trans-prop-nice(top, $dur: 150ms, $delay: 50ms);
            top: 0;
        }
        &:hover {
            .l-control-bar {
                @include trans-prop-nice(opacity, 150ms, 100ms);
                opacity: 1;
            }
            .l-view-section {
                @include trans-prop-nice(top, $dur: 150ms);
                top: $btnExportH + $interiorMargin;
            }
        }
    }

}