/**
 * @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-fix { @include clear-fix; }
.clear {
    clear: both;
    display: block;
    margin: 0;
    padding: 0;
}

.vertical-center {
    position: absolute;
    left: 50%;
    top: 50%;
    @include transform(translate(-50%, -50%));
}

// Styles
.#{$shape-round-class} { border-radius: $round; }
.#{$state-is-prefix}draggable { cursor: move; }
.#{$state-is-prefix}dragging { cursor: grabbing; }
.#{$state-is-prefix}disabled,
[disabled] { cursor: not-allowed !important; }

// 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: inherit; top: -2px; }
.caret-down { border-top-color: inherit; bottom: -2px; }
.caret-left { border-right-color: inherit; }
.caret-right { border-left-color: inherit; }

// Arrows, Characters
.x,
.arrow-up,
.arrow-down,
.arrow-left,
.arrow-right {
    @include reset-inline-block;
    font: bold 1.5rem/1rem Arial, sans-serif;
    text-transform: uppercase;
}

.x:before { content: "\00D7"; /* times */ }

.arrow-up:before,
.arrow-left:before,
.arrow-down:before,
.arrow-right:before {
    display: inline-block;
    position: relative;
    content: "\025B4"; /* blacktriangle */
}

.arrow-right:before { @include transform(rotate(90deg)); }
.arrow-left:before { @include transform(rotate(-90deg)); }
.arrow-down:before { @include transform(rotate(180deg)); }

// Bullets
.bullets {
    list-style: none;
    line-height: 100%;
    margin: 0;
    padding: 0;

    li {
        display: inline-block;
        margin: 0 3px;
    }

    a {
        display: inline-block;
        border: 3px solid #fff;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        opacity: $default-opacity;
        background: black(0);

        &:hover { opacity: 1; border-width: 2px; }
        @include is-active { background: #fff; }
    }

    &:empty { display: none; }
}

// Sorter
.sorter {
    @include reset-inline-block;
    max-width: 10px;
    line-height: 5px;
    top: -1px;
    margin: 0 .25rem;

    .caret-up,
    .caret-down { opacity: .25; }

    &.desc .caret-up,
    &.asc .caret-down { opacity: 1; }
}