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


/* Component
 ========================================================================== */

/*
 * 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() {}
.hook-close-alt() {}