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

@import "../common";

body {
    font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: $background-color;
    color: $foreground-color;
}

//-------------------- Layout --------------------//

a {
    color: shade($info, 15%);
    text-decoration: none;

    &:hover { color: $info-dark; }
}

blockquote cite { color: $default; }

code { background: $info-light; color: $info-dark; }
var { background: $error-light; color: $error-dark; }
mark { background: tint($warning-light, 25%); }

input, textarea {
    font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.close { line-height: 90%; }

//-------------------- Accordion --------------------//

.accordion-head {
    @include transition(all .15s);

    .is-active & {
        background: $info;
        border-color: $info-dark;
        color: #fff;
    }
}

//-------------------- Alert --------------------//

.alert {
    @include alert-style($default-light, $default-dark);

    &.is-info { @include alert-style($info-light, $info-dark); }
    &.is-error { @include alert-style($error-light, $error-dark); }
    &.is-warning { @include alert-style($warning-light, $warning-dark); }
    &.is-success { @include alert-style($success-light, $success-dark); }
}

//-------------------- Breadcrumbs --------------------//

.breadcrumbs {
    overflow: hidden;

    a {
        height: 45px;
        line-height: 45px;
        padding: 0 30px 0 20px;
        border-right: 0;
        outline: none;

        &:before,
        &:after {
            content: "";
            position: absolute;
            height: 32px;
            width: 32px;
            border-right: 1px solid $gray-lightest;
            border-bottom: 1px solid $gray-lightest;
            top: 6px;
            right: 2px;
            z-index: 1;
            @include transform(rotate(-45deg));
        }

        &:before {
            height: 32px;
            width: 32px;
            border-right: 1px solid $gray-dark;
            border-bottom: 1px solid $gray-dark;
            right: 4px;
        }

        &:hover {
            &:before {
                border-color: $gray-darkest;
            }
        }

        .caret-right { display: none; }
    }

    li:last-child a {
        color: $default;
    }

    &.small {
        a { height: 30px; line-height: 30px; padding: 0 25px 0 15px; }
        a:before { height: 22px; width: 22px; top: 4px; }
        a:after { height: 22px; width: 22px; top: 4px; }
    }

    &.large {
        a { height: 50px; line-height: 50px; padding: 0 30px 0 20px; }
        a:before { height: 40px; width: 40px; top: 4px; }
        a:after { height: 40px; width: 40px; top: 4px; }
    }
}

//-------------------- Button --------------------//

.button {
    color: #fff;
    @include transition(all .2s);
    @include button-style($default, $default-light, $default-dark);

    &:active {
        top: 1px;
    }

    &.is-info { @include button-style($info, $info-light, $info-dark); }
    &.is-error { @include button-style($error, $error-light, $error-dark); }
    &.is-warning { @include button-style($warning, $warning-light, $warning-dark); }
    &.is-success { @include button-style($success, $success-light, $success-dark); }
}

//-------------------- Dropdown --------------------//

.dropdown {
    box-shadow: 5px 5px black(.25);

    li {
        a {
            @include transition(background .15s);

            .caret-right {
                top: 2px;
            }
        }

        &.heading {
            color: $default;
            font-size: .8rem;
        }

        &:hover > a {
            background: $info;
            color: #fff;

            .caret-right { border-left-color: #fff; }
        }

        &:nth-child(odd) {
            background: $gray-lightest;
        }
    }
}

.dropdown.dropdown--top {
    box-shadow: 5px -5px black(.25);
}

//-------------------- Flyout, TypeAhead --------------------//

.flyout,
.type-ahead {
    background: $gray;
    border: 1px solid $gray-dark;
    box-shadow: 5px 5px black(.25);
    padding: $small-padding;

    li {
        &:nth-child(odd) > a { background: $gray-lightest; }
        &.heading { background: $gray-dark; }

        > a {
            @include transition(all .15s);
        }

        > a:hover,
        &.is-open > a,
        &.is-active > a {
            background: $info;
            color: #fff;

            .caret-right { border-left-color: #fff; }
        }
    }
}

.type-ahead-highlight { background: $warning-light; }

.type-ahead {
    li a:hover,
    li.is-active a {
        .type-ahead-desc { color: $gray-lightest; }
        .type-ahead-highlight{ background: $info-light; color: $info-dark; }
    }
}

//-------------------- Label, Badge --------------------//

.label,
.badge {
    @include label-style($default-light, $default-dark);

    &.is-info { @include label-style($info-light, $info-dark); }
    &.is-error { @include label-style($error-light, $error-dark); }
    &.is-warning { @include label-style($warning-light, $warning-dark); }
    &.is-success { @include label-style($success-light, $success-dark); }
}

.label.label--left {
    &:after { border-right-color: $default-light; }
    &.is-info:after { border-right-color: $info-light; }
    &.is-error:after { border-right-color: $error-light; }
    &.is-warning:after { border-right-color: $warning-light; }
    &.is-success:after { border-right-color: $success-light; }
}

.label.label--right {
    &:after { border-left-color: $default-light; }
    &.is-info:after { border-left-color: $info-light; }
    &.is-error:after { border-left-color: $error-light; }
    &.is-warning:after { border-left-color: $warning-light; }
    &.is-success:after { border-left-color: $success-light; }
}

//-------------------- Modal --------------------//

.modal-outer {
    margin: $margin;
    background: $gray;
    border: 1px solid $gray-dark;
    box-shadow: 5px 5px black(.25);
}

.modal-body {
    background: #fff;
    border-top: 1px solid $gray-dark;
    border-bottom: 1px solid $gray-dark;
}

.modal-foot {
    background: $gray-lightest;
    text-align: center;
}

//-------------------- Popover --------------------//

.popover {
    margin: 15px;
    background: #fff;
    line-height: 115%;
    border-radius: $round;
    border: 1px solid $gray-dark;
    box-shadow: 5px 5px black(.25);

    &.top-center .popover-arrow {
        border-top-color: black(.25);
        @include transform(translateY(6px));

        &:after {
            margin-top: -8px;
            border-top: 8px solid #fff;
        }
    }

    &.center-left .popover-arrow {
        border-left-color: black(.25);
        @include transform(translateX(6px));

        &:after {
            margin-left: -8px;
            border-left: 8px solid #fff;
        }
    }

    &.center-right .popover-arrow {
        border-right-color: $gray-dark;

        &:after {
            margin-left: 2px;
            border-right-color: #fff;
        }
    }

    &.bottom-center .popover-arrow {
        border-bottom-color: $gray-dark;

        &:after {
            margin-top: 2px;
            border-bottom-color: #fff;
        }
    }

    &.top-left,
    &.top-right,
    &.bottom-left,
    &.bottom-right {
        margin: $margin / 2;
    }
}

.popover-head {
    font-weight: bold;
    background: $gray;
    border-bottom: 1px solid $gray-dark;
}

//-------------------- Progress --------------------//

.progress {
    box-shadow: inset 1px 1px 2px $gray-darkest;
    border-radius: $round;
}

.progress-bar {
    color: #fff;
    font-weight: bold;
    border-top-left-radius: $round;
    border-bottom-left-radius: $round;
    @include progress-style($default, $default-dark);

    &.is-info { @include progress-style($info, $info-dark); }
    &.is-error { @include progress-style($error, $error-dark); }
    &.is-warning { @include progress-style($warning, $warning-dark); }
    &.is-success { @include progress-style($success, $success-dark); }
}

.progress-bar + .progress-bar {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

//-------------------- Tooltip --------------------//

.tooltip {
    background: black(.70);
    color: #fff;
    border-radius: $round;
    margin: 10px;
    line-height: 115%;

    &.top-center .tooltip-arrow { border-top-color: black(.70); }
    &.center-left .tooltip-arrow { border-left-color: black(.70); }
    &.center-right .tooltip-arrow { border-right-color: black(.70); }
    &.bottom-center .tooltip-arrow { border-bottom-color: black(.70); }
}

.tooltip-head {
    color: $info;
    font-weight: bold;
    margin-bottom:  $margin / 2;
}