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

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


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

@panel-title-margin-bottom:                     @global-margin;
@panel-title-margin-bottom:                     @global-margin;
@panel-title-font-size:                         @global-h3-font-size;
@panel-title-font-weight:                       @global-heading-font-weight;
@panel-title-line-height:                       @global-h3-line-height;
@panel-title-text-transform:                    @global-heading-text-transform;
@panel-title-color:                             @global-highlight-color;

@panel-teaser-margin-bottom:                    @panel-box-padding;

@panel-box-padding:                             @global-margin;
@panel-box-background:                          @global-background;
@panel-box-color:                               @global-color;
@panel-box-hover-color:                         fade(@panel-box-color, 90%);
@panel-box-title-color:                         @panel-title-color;
@panel-box-teaser-margin:                       -(@panel-box-padding + @panel-box-border-width);

@panel-box-primary-background:                  @global-primary-background;
@panel-box-primary-color:                       @global-contrast-color;
@panel-box-primary-hover-color:                 fade(@panel-box-primary-color, 90%);
@panel-box-primary-title-color:                 @global-contrast-color;

@panel-box-secondary-background:                @global-light-background;
@panel-box-secondary-color:                     @panel-box-color;
@panel-box-secondary-hover-color:               darken(@panel-box-secondary-background, 2%);
@panel-box-secondary-title-color:               @panel-box-title-color;

@panel-hover-padding:                           @global-margin;
@panel-hover-color:                             @global-color;
@panel-hover-hover-color:                       @global-color;
@panel-hover-hover-background:                  rgba(0,0,0,0);
@panel-hover-teaser-margin:                     -(@panel-hover-padding + 1);

@panel-header-title-border:                     @global-border;
@panel-header-title-color:                      @panel-title-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, 2%);
@panel-box-primary-hover-background:            darken(@panel-box-primary-background, 3%);
@panel-box-secondary-hover-background:          lighten(@panel-box-secondary-background, 3%);

@panel-box-border-width:                        @global-border-width;
@panel-box-border:                              @global-border;

@panel-box-primary-border-width:                @global-border-width;
@panel-box-primary-border:                      darken(@panel-box-primary-background, 5%);

@panel-box-secondary-border-width:              @global-border-width;
@panel-box-secondary-border:                    darken(@panel-box-secondary-background, 5%);

@panel-hover-border:                            darken(@global-border, 3%);

@panel-header-border-size:                      50px;
@panel-header-border-width:                     2px;
@panel-header-border:                           @global-primary-background;


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

.hook-panel-title() {}


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

.hook-panel-badge() {}


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

.hook-panel-box() {
    position: relative;
    border: @panel-box-border-width solid @panel-box-border;
    border-radius: @global-border-radius;
    box-shadow: @global-shadow;
    -webkit-transition: @global-transition;
    transition: @global-transition;
}

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

.hook-panel-box-primary() {

    border: @panel-box-primary-border-width solid @panel-box-primary-border;

    // 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: @global-primary-link-hover-color; }

    }

    // Button component
    .uk-button {

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

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

        &:active,
        &:focus {
            background: desaturate(darken(@global-primary-background, 20%), 16%);
            box-shadow: none;
            color: @global-contrast-color;
        }

    }

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

}

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

.hook-panel-box-secondary() { border: @panel-box-secondary-border-width solid @panel-box-secondary-border; }

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


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

.hook-panel-hover() {
    border: @global-border-width solid transparent;
    border-radius: @global-border-radius;
}

.hook-panel-hover-hover() { border-color: @panel-hover-border; }


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

.hook-panel-header() {

    position: relative;
    padding-bottom: 20px;
    border: none;

    &::after {
        display: block;
        width: @panel-header-border-size;
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        border-bottom: @panel-header-border-width solid @panel-header-border;
    }

}


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

.hook-panel-misc() {

    // Panel teaser border radius
    .uk-panel-box .uk-panel-teaser {
        border-top-left-radius: @global-border-radius;
        border-top-right-radius: @global-border-radius;
        overflow: hidden;
        // Fixed `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
        -webkit-transform: translateZ(0);
    }

    // uk-panel-header with uk-text-center
    .uk-panel-header.uk-text-center .uk-panel-title::after,
    .uk-text-center > div > .uk-panel-header > .uk-panel-title::after { margin: 0 auto; }

    // uk-panel-badge position on small viewports
    @media (max-width: @breakpoint-small) {

        .uk-panel-badge {
            position: static;
            margin-bottom: @global-margin
        }

    }

}
