/**
 * @copyright	Copyright 2010-2013, The Titon Project
 * @license		http://opensource.org/licenses/bsd-license.php
 * @link		http://titon.io
 */

@import "../common";

// Use border-box for everything
*, *:after, *:before { @include box-sizing(border-box); }

// Alignment
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }

// Animations
.show { opacity: 1 !important; visibility: visible !important; }
.hide { visibility: hidden !important; }

// Display
.shown { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

// Positioning
.relative { position: relative; }
.absolute { position: absolute; }
.static { position: static; }

// Layout
.clear { clear: both; display: block; margin: 0; padding: 0; }
.clear-fix { @include clear-fix; }

// Styles
.round { border-radius: $round; }
.is-draggable { cursor: move; }
.is-disabled,
button[disabled] { cursor: not-allowed !important; pointer-events: none; }

// Carets
.caret-up,
.caret-down,
.caret-left,
.caret-right {
	@include reset-inline-block;
	border: 5px solid transparent;
	content: "";
	height: 0;
	width: 0;
}

.caret-up { border-bottom-color: $foreground-color; }
.caret-down { border-top-color: $foreground-color; }
.caret-left { border-right-color: $foreground-color; }
.caret-right { border-left-color: $foreground-color; }

// Close
.x {
	@include reset-inline-block;
	color: $foreground-color;
	font: bold 1.5rem/100% Arial, sans-serif;
	text-transform: uppercase;
}

.close {
	@include reset-inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: white(.5);
	border-radius: 2px;
	cursor: pointer;

	.x {
		color: black(.5);
		position: relative;
		top: -1px;
	}

	&:hover {
		background: white(.8);

		.x { color: black(.75); }
	}
}