// Name:            Thumbnail
// Description:     Defines styles for image thumbnails
//
// Component:       `uk-thumbnail`
//
// Sub-objects:     `uk-thumbnail-caption`
//
// Modifiers:       `uk-thumbnail-mini`
//                  `uk-thumbnail-small`
//                  `uk-thumbnail-medium`
//                  `uk-thumbnail-large`
//                  `uk-thumbnail-expand`
//
// Markup:
//
// <!-- uk-thumbnail -->
// <figure class="uk-thumbnail">
//     <img src="" alt="">
//     <figcaption class="uk-thumbnail-caption"></figcaption>
// </figure>
//
// ========================================================================


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

@thumbnail-padding:                             4px;
@thumbnail-border:                              #ddd;
@thumbnail-border-width:                        1px;
@thumbnail-background:                          #fff;
@thumbnail-hover-border:                        #aaa;
@thumbnail-hover-background:                    #fff;

@thumbnail-caption-padding:                     @thumbnail-padding;
@thumbnail-caption-color:                       #444;

@thumbnail-mini-width:                          150px;
@thumbnail-small-width:                         200px;
@thumbnail-medium-width:                        300px;
@thumbnail-large-width:                         400px;


/* ========================================================================
   Component: Thumbnail
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Responsive behavior
 * 3. Corrects `max-width` behavior sed
 * 4. Required for `figure` element
 * 5. Style
 */

.uk-thumbnail {
    /* 1 */
    display: inline-block;
    /* 2 */
    max-width: 100%;
    /* 3 */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* 3 */
    margin: 0;
    /* 4 */
    padding: @thumbnail-padding;
    border: @thumbnail-border-width solid @thumbnail-border;
    background: @thumbnail-background;
    .hook-thumbnail;
}

/*
 * Hover state for `a` elements
 * 1. Apply hover style also to focus state
 * 2. Needed for caption
 * 3. Remove default focus style
 */

a.uk-thumbnail:hover,
a.uk-thumbnail:focus { // 1
    border-color: @thumbnail-hover-border;
    background-color: @thumbnail-hover-background;
    /* 2 */
    text-decoration: none;
    /* 3 */
    outline: none;
    .hook-thumbnail-hover;
}


/* Caption
 ========================================================================== */

.uk-thumbnail-caption {
    padding-top: @thumbnail-caption-padding;
    text-align: center;
    color: @thumbnail-caption-color;
    .hook-thumbnail-caption;
}


/* Sizes
 ========================================================================== */

.uk-thumbnail-mini { width: @thumbnail-mini-width; }
.uk-thumbnail-small { width: @thumbnail-small-width; }
.uk-thumbnail-medium { width: @thumbnail-medium-width; }
.uk-thumbnail-large { width: @thumbnail-large-width; }

.uk-thumbnail-expand,
.uk-thumbnail-expand > img { width: 100%; }


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

.hook-thumbnail-misc;

.hook-thumbnail() {}
.hook-thumbnail-hover() {}
.hook-thumbnail-caption() {}
.hook-thumbnail-misc() {}