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

//
// Component: Panel
//
// ========================================================================


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

@panel-title-margin-bottom:                     @global-margin;
@panel-title-font-size:                         24px;
@panel-title-line-height:                       28px;
@panel-title-font-weight:                       @global-heading-font-weight;
@panel-title-color:                             @global-color;

@panel-box-padding:                             @global-margin;
@panel-box-background:                          @global-light-background;
@panel-box-color:                               @global-color;
@panel-box-title-color:                         @global-color;

@panel-box-primary-background:                  @global-primary-background;
@panel-box-primary-color:                       @global-contrast-color;
@panel-box-primary-title-color:                 @global-contrast-color;

@panel-box-secondary-background:                @global-dark-background;
@panel-box-secondary-color:                     @global-color;
@panel-box-secondary-title-color:               @panel-title-color;

@panel-hover-padding:                           @global-margin;
@panel-hover-color:                             @global-color;
@panel-hover-hover-color:                       @global-color;

@panel-header-title-border:                     @global-border;
@panel-header-title-color:                      @global-color;

@panel-divider-gutter:                          @global-grid-gutter;
@panel-divider-gutter-large:                    @global-grid-gutter-large;
@panel-divider-border:                          @global-border;

//
// New
//

@panel-box-hover-background:                    darken(@panel-box-background, 3%);
@panel-box-primary-hover-background:            darken(@panel-box-primary-background, 7%);
@panel-box-secondary-hover-background:          darken(@panel-box-secondary-background, 5%);

@panel-box-button-background:                   darken(@button-background, 3%);
@panel-box-button-hover-background:             darken(@button-background, 6%);

@panel-box-secondary-button-background:         darken(@button-background, 10%);
@panel-box-secondary-button-color:              @global-color;
@panel-box-secondary-button-hover-background:   darken(@button-background, 16%);

// Sub-object: `uk-panel-title`
// ========================================================================

.hook-panel-title() {}


// Sub-object: `uk-panel-badge`
// ========================================================================

.hook-panel-badge() {}


// Modifier: `uk-panel-box`
// ========================================================================

.hook-panel-box() {

    // Button component
    .uk-button:not(.uk-button-primary) {

        background: @panel-box-button-background;

        &:hover { background: @panel-box-button-hover-background; }

	}

}

.hook-panel-box-hover() { background: @panel-box-hover-background; }

//
// Sub-modifier: `uk-panel-box-primary`
//

.hook-panel-box-primary() {

	// Headlines
    h1, h2, h3, h4, h5, h6 { color: @panel-box-primary-title-color; }

    // Hyperlink
    > a:not([class]),
    > :not([class*='uk-nav']) a:not([class]) {

        color: @global-primary-link-color;

        &:hover { color: darken(@global-primary-link-hover-color, 6%); }

    }

    // Button component
    .uk-button {

        background: @global-contrast-color;
        color: @global-primary-background;

        &:hover {
            background: darken(@global-contrast-color, 7%);
            color: darken(@global-primary-color, 12%);
        }

	}

	.uk-button:not(.uk-button-primary) {
        background: darken(@panel-box-primary-background, 8%);
        color: @global-contrast-color;

        &:hover {
            background: darken(@panel-box-primary-background, 14%);
            color: @global-contrast-color;
        }

        &:active {
            background: darken(@panel-box-primary-background, 18%);
            color: @global-contrast-color;
        }
    }

    .uk-badge {
        background-color: @global-contrast-color;
        color: @panel-box-primary-background;
    }

}

.hook-panel-box-primary-hover() { background: @panel-box-primary-hover-background; }

//
// Sub-modifier: `uk-panel-box-secondary`
//

.hook-panel-box-secondary() {

        // Button component
    .uk-button:not(.uk-button-primary) {

        background: @panel-box-secondary-button-background;
        color: @panel-box-secondary-button-color;

        &:hover { background: @panel-box-secondary-button-hover-background; }

    }

}

.hook-panel-box-secondary-hover() { background: @panel-box-secondary-hover-background; }


// Modifier: `uk-panel-hover`
// ========================================================================

.hook-panel-hover() {}

.hook-panel-hover-hover() {}


// Modifier: `uk-panel-header`
// ========================================================================

.hook-panel-header() {}


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

.hook-panel-misc() {}