// Name:            Close
// Description:     Defines styles for a close button
//
// Component:       `uk-close`
//
// Modifiers:       `uk-close-alt`
//
// Uses:            Icon: FontAwesome
//
// Used by:         Alert
//                  Modal
//
// ========================================================================


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

@close-alt-background:                          #eee;


/* ========================================================================
   Component: Close
 ========================================================================== */

/*
 * 1. Required for `button` elements and makes
 *    close button more robust against different box-sizing use
 * 2. Required for `button` elements
 */

.uk-close {
    -moz-box-sizing: content-box;
    box-sizing: content-box; /* 1 */
    display: inline-block;
    width: 20px;
    line-height: 20px;
    text-align: center;
    color: inherit;
    opacity: 0.3;
    /* 2. */
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    background: transparent; /* Needed for Sarari */
    .hook-close;
}

/* Icon */
.uk-close:after {
    display: block;
    content: "\f00d";
    font-family: FontAwesome;
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */

.uk-close:hover,
.uk-close:focus { /* 1 */
    opacity: 0.5;
    outline: none; /* 2 */
}

/* Required for `a` elements */
a.uk-close:hover {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}


/* Modifier
 ========================================================================== */

.uk-close-alt {
    padding: 2px;
    border-radius: 100%;
    background: @close-alt-background;
    opacity: 1;
    .hook-close-alt;
}

/* Hover */
.uk-close-alt:hover,
.uk-close-alt:focus { opacity: 1; }

/* Icon */
.uk-close-alt:after { opacity: 0.5; }

.uk-close-alt:hover:after,
.uk-close-alt:focus:after { opacity: 0.8; }


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

.hook-close-misc;

.hook-close() {}
.hook-close-alt() {}
.hook-close-misc() {}