// Name:            Caption
// Description:     Defines styles for a caption
//
// Component:       `uk-caption`
//
// Sub-objects:     `uk-caption-toggle`
//
// Modifier:        `uk-caption-top`
//                  `uk-caption-bottom`
//                  `uk-caption-left`
//                  `uk-caption-right`
//                  `uk-caption-panel`
//
// Uses:            `uk-flex
//
// ========================================================================


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

@caption-padding:                               20px;
@caption-color:                                 #fff;

@caption-panel-background:                      rgba(0,0,0,0.2);
@caption-panel-color:                           #fff;


/* ========================================================================
   Addon: Caption
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Position cover
 * 3. Style
 */

.uk-caption {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 3 */
    padding: @caption-padding;
    color: @caption-color;
    .hook-caption;
}

/*
 * Show caption
 * 1. `uk-hover` to support touch devices
 */

.uk-caption-toggle:hover .uk-caption,
.uk-caption-toggle.uk-hover .uk-caption, // 1
.uk-active > .uk-caption { display: block; }

.uk-caption-toggle:hover .uk-caption.uk-flex,
.uk-caption-toggle.uk-hover .uk-caption.uk-flex, // 1
.uk-active > .uk-caption.uk-flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/*
 * Remove margin from the last-child
 */

.uk-caption > :last-child { margin-bottom: 0; }

/*
 * Keep color for headings if the default heading color is changed
 */

.uk-caption h1,
.uk-caption h2,
.uk-caption h3,
.uk-caption h4,
.uk-caption h5,
.uk-caption h6 { color: inherit; }


/* Sub-object: `uk-caption-toggle`
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Set max-width for responsive images to prevent `inline-block` consequences
 * 4. Remove the gap between the container and its child element
 * 5. Fixed wrong scaling calculation for images in Chrome
 */

.uk-caption-toggle {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    vertical-align: middle;
    /* 5 */
    overflow: hidden;
}


/* Position modifiers
 ========================================================================== */

.uk-caption-top { bottom: auto; }

.uk-caption-bottom { top: auto; }

.uk-caption-left { right: auto; }

.uk-caption-right { left: auto; }


/* Sub-object: `uk-caption-panel`
 ========================================================================== */

.uk-caption-panel {
    color: @caption-panel-color;
    background: @caption-panel-background;
    .hook-caption-panel;
}


// Hooks
// ========================================================================

.hook-caption-misc;

.hook-caption() {}
.hook-caption-panel() {}
.hook-caption-misc() {}