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

/**
 * Based on the Tomorrow Night theme by Chris Kempson.
 * https://github.com/chriskempson/tomorrow-theme
 */

@import "../common";

$gray-lightest: #72757b;
$gray-light: #575b62;
$gray: #373b41;
$gray-dark: #282a2e;
$gray-darkest: #1d1f21;

$background-color: #1d1f21;
$foreground-color: #c5c8c6;
$middleground-color: #373b41;

$default: #969896;
$default-light: #e2e3e2;
$default-dark: #515251;

$info: #81a2be;
$info-light: #d2e9f4;
$info-dark: #45586d;

$warning: #f0c674;
$warning-light: #fdf7c5;
$warning-dark: #b1753e;

$success: #b5bd68;
$success-light: #f1f4b8;
$success-dark: #666d37;

$error: #cc6666;
$error-light: #f8b5b5;
$error-dark: #7a3636;

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

body {
    color: $foreground-color;
    background: $background-color;
}

//-------------------- Typography --------------------//

.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; }
.x { color: $foreground-color; }

.text-muted { color: $default; }
.text-info { color: $info; }
.text-error { color: $error; }
.text-warning { color: $warning; }
.text-success { color: $success; }

a {
    color: $info;
    text-decoration: none;

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

blockquote { border-color: $info; }
blockquote cite { color: $default; }

pre, code, var, kbd { color: $default-dark; }
code { background: $info-light; color: $info-dark; }
var { background: $error-light; color: $error-dark; }

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

.table {
    background: $gray;

    td, th {
        border-color: $gray-light;
    }

    thead tr,
    tfoot tr {
        background: $gray-light;

        th { border-color: $gray-lightest; }
    }

    tbody tr {
        background: $gray;

        &:nth-child(odd) { background: $gray-dark; }
        &.divider { background: $gray-light; }
    }
}

.table.table--hover {
    tbody tr:not(.divider):hover { background: $gray-darkest; }
}

.table.table--sortable thead th a {
    background: $gray-light;
    color: #fff;

    &:hover { background: shade($gray-light, 5%); }
}

fieldset {
    border-color: $gray-light;
}

.input {
    background: $gray;
    border-color: $gray-light;
    color: $foreground-color;

    &:hover { border-color: $gray-lightest; }
    &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; }

    @include disabled-state {
        color: $default;
        border-color: $gray;
    }

    &[readonly] {
        color: $default;
        border-color: $gray;
        box-shadow: none;
    }
}

.input-addon {
    border-color: $gray-light;
    background-color: $gray-dark;
}

.input-group {
    .input-addon,
    .button,
    .button-group {
        box-shadow: none;
        margin-right: -5px;
    }
}

.field {
    @include field-style;
}

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

.accordion {
    border-color: $gray-light;
    border-radius: 3px;
    background: $gray-dark;

    li {
        &:first-child .accordion-head {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        &:last-child {
            .accordion-head {
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
            }

            .accordion-body {
                border: 0;
            }
        }

        &.is-active .accordion-head {
            background: $gray-light;
            border-color: $gray-lightest;
            color: $success;
        }
    }
}

.accordion-head {
    color: $info;
    background: $gray;
    border-color: $gray-light;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    @include transition(all .3s);
}

.accordion-body { padding: $padding; }

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

.alert {
    text-shadow: 0 1px 0 white(.50);
    box-shadow: 0 0 3px #000;
    @include alert-style($default-light, $default-dark);

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

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

.breadcrumbs {
    background: $gray;
    border-color: $gray-light;

    a {
        padding-right: 0 !important;

        .caret-right {
            top: -1px;
            margin-left: $medium-padding;
            opacity: .5;
            display: inline-block;
        }
    };

    &.small a .caret-right { margin-left: $small-padding; }
    &.large a .caret-right { margin-left: $large-padding; }

    li:last-child a {
        color: $default;
        .caret-right { display: none; }
    }
}

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

$button-shadow: 0 1px 0 white(.5) inset, 0 0 3px #000;

@mixin button-style($color) {
    color: shade($color, 75%);
    background: $color;
    border: 1px solid #000;
    @include background-image(linear-gradient($color, shade($color, 30%)));

    @include active-state {
        color: #000;
        background: tint($color, 30%);
        @include background-image(linear-gradient(tint($color, 30%), $color));
    }

    @include disabled-state { background: $color; }
    &:active { background: $color; }
}

.button {
    font-weight: bold;
    text-shadow: 0 1px white(.35);
    box-shadow: $button-shadow;
    @include transition(all .3s);

    &.small, .small & { text-shadow: 0 1px white(.25); }
    &.large, .large & { font-weight: normal; }

    @include button-style($default);
    @include disabled-state {
        opacity: .35;
    }

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

.button.visual-popout {
    box-shadow: $button-shadow, 0 6px 0 0 black(.25) !important;

    &:active {
        box-shadow: $button-shadow, 0 3px 0 0 black(.5) !important;
    }
}

//-------------------- ButtonGroup, Pagination --------------------//

.button-group,
.pagination.pagination--grouped ul {
    box-shadow: 0 0 3px #000;

    li .button,
    > .button {
        box-shadow: 0 1px 0 white(0.5) inset;
        border-left: 1px solid black(.35);
        border-right: 1px solid black(.35);
    }
}

.button-group {
    > li:first-child .button,
    > .button:first-child { border-left: 0; }

    > li:last-child .button,
    > .button:last-child { border-right: 0; }
}

.pagination.pagination--grouped li {
    &:first-child .button { border-left: 0; }
    &:last-child .button { border-right: 0; }
}

.button-group.button-group--vertical {
    .button {
        box-shadow: none;
        border: 1px solid black(.35);
    }

    > li:first-child .button,
    > .button:first-child { border-top: 0; }

    > li:last-child .button,
    > .button:last-child { border-bottom: 0; }
}

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

.label,
.badge {
    color: #000;
    box-shadow: 0 0 3px #000;
    text-shadow: 0 1px white(.35);
    background-color: $default;

    &.is-info { background-color: $info; }
    &.is-warning { background-color: $warning; }
    &.is-error { background-color: $error; }
    &.is-success { background-color: $success; }
}

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

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

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

.dropdown,
.flyout,
.type-ahead {
    border: 3px solid white(.75);
    border-radius: 3px;
    background: $gray-dark;
    box-shadow: 0 0 3px #000;

    li {
        border-top: 1px solid $gray;

        &:first-child { border: 0; }

        a {
            .caret-right {
                float: right;
                margin-top: 3px;
            }
        }

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

        &.heading {
            background: $gray;
            font-size: .9em;
            color: #fff;
        }

        &.divider {
            background: $gray-darkest;
            border-top: 1px solid $gray;
            height: 10px;
            margin: 0;
        }
    }
}

.type-ahead-desc {
    display: block;
    color: $default;
    font-size: .7rem;
}

.type-ahead-highlight {
    color: $warning;
}

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

.modal {
    .close {
        top: .9rem;
        right: .9rem;
    }
}

.modal-outer {
    border: 10px solid white(.75);
    border-radius: 3px;
    background: $gray-dark;
    margin: 10px;
}

.modal-head,
.modal-foot,
.modal-loading,
.modal-error {
    background: $gray-darkest;
}

.modal-head {
    font-size: 1rem;
    font-weight: normal;
    color: $info;
}

.modal-foot {
    text-align: center;
}

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

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

.popover {
    border: 3px solid white(.75);
    border-radius: 3px;
    background: $gray-dark;
    box-shadow: 0 0 3px #000;
    margin: 10px;

    .popover-head {
        font-size: 1rem;
        font-weight: bold;
        color: $info;
        background: $gray-darkest;
        border-bottom: 1px solid $gray;
    }

    &.center-left .popover-arrow {
        right: -19px;
        border-left-color: $gray-darkest;

        &:after {
            margin-left: -2px;
            border-left-color: white(.75);
        }
    }

    &.center-right .popover-arrow {
        left: -19px;
        border-right-color: $gray-darkest;

        &:after {
            margin-left: 2px;
            border-right-color: white(.75);
        }
    }

    &.top-center .popover-arrow {
        bottom: -19px;
        border-top-color: $gray-darkest;

        &:after {
            margin-top: -2px;
            border-top-color: white(.75);
        }
    }

    &.bottom-center .popover-arrow {
        top: -19px;
        border-bottom-color: $gray-darkest;

        &:after {
            margin-top: 2px;
            border-bottom-color: white(.75);
        }
    }
}

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

.progress {
    background: $gray;
    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;
}

//-------------------- Showcase --------------------//

.showcase {
    border: 10px solid white(.75);
    border-radius: 3px;

    .close {
        top: -11px;
        right: -40px;
    }
}

.showcase-inner {
    padding: 0;
}

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

.tooltip {
    background: white(.90);
    color: #000;
    border-radius: 3px;
    margin: $margin / 2;

    .tooltip-head {
        padding-bottom: $small-padding;
        font-weight: bold;
        font-size: 1rem;
    }

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