// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

//
// Component: Overlay
//
// ========================================================================


// Variables
// ========================================================================

@overlay-panel-color:                           @global-contrast-color;

@overlay-panel-background:                      fade(@global-contrast-color, 90%);

@overlay-icon-color:                            @global-contrast-color;

//
// New
//

@overlay-panel-background-color:				@global-highlight-color;
@overlay-panel-background-icon-color:			@overlay-panel-background-color;

@overlay-button-background:                     @overlay-panel-background-color;
@overlay-button-color:                          @global-contrast-color;

@overlay-button-hover-background:               lighten(@overlay-button-background, 8%);
@overlay-button-hover-color:                    @overlay-button-color;

@overlay-button-active-background:              lighten(@overlay-button-background, 16%);
@overlay-button-active-color:                   fade(@overlay-button-color, 75%);


// Sub-object `uk-overlay-panel`
// ========================================================================

.hook-overlay-panel() {}


// Sub-object `uk-overlay-background`
// ========================================================================

.hook-overlay-background() {

	color: @overlay-panel-background-color;

	// uk-button in uk-overlay-background
    .uk-button {
        background: @overlay-button-background;
        color: @overlay-button-color;

        // Hover event
        &:hover {
            background: @overlay-button-hover-background;
            color: @overlay-button-hover-color;
        }

        // Click event
        &:active {
            background: @overlay-button-active-background;
            color: @overlay-button-active-color;
        }

    }

    // Icon color
    &.uk-overlay-icon::before { color: @overlay-panel-background-icon-color; }

}


// Sub-object `uk-overlay-icon`
// ========================================================================

.hook-overlay-icon() {}


// Miscellaneous
// ========================================================================

.hook-overlay-misc() {

    .uk-overlay-background,
    .uk-overlay-background + .uk-overlay-panel,
    .uk-overlay-background ~ .uk-overlay-panel {

        color: @overlay-panel-background-color;

        // Headline color
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 { color: @overlay-panel-background-color; }

        // uk-button in uk-overlay-background
        .uk-button {
            background: @overlay-button-background;
            color: @overlay-button-color;

            // Hover event
            &:hover {
                background: @overlay-button-hover-background;
                color: @overlay-button-hover-color;
            }

            // Click event
            &:active {
                background: @overlay-button-active-background;
                color: @overlay-button-active-color;
            }

        }

        // Icon color
        &.uk-overlay-icon:before { color: @overlay-panel-background-icon-color; }

    }

}