/**
 * @copyright   2010-2014, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

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

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

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

a {
    color: darken($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: lighten($warning-light, 25%); }

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

.accordion-header {
    background: $gray;
    border: 1px solid $gray-dark;
    margin: -1px;
    transition: all .15s;

    &:hover { background-color: $gray-light; }

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

        &:hover { background-color: lighten($info, 5%); }
    }
}

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

.breadcrumb {
    border: 1px solid $gray-dark;
    background: $gray;

    ul, ol {
        .caret { color: $gray-darkest; }
    }
}

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

@mixin button-style($base, $light, $dark) {
    background: darken($base, 5%);
    border: 1px solid darken($base, 12%);

    &:hover {
        color: #fff;
        background-color: lighten($base, 5%);
    }

    @include is-active {
        color: #fff;
        background-color: darken($base, 20%);
        text-shadow: 1px 1px $dark;
        border-color: darken($base, 30%);
    }

    @include is-disabled {
        background: $base;
        border-color: $base;
    }

    @content;
}

.button {
    color: #fff;
    background: $gray;
    font-weight: bold;
    text-shadow: 1px 1px black(.2);
    transition: color .2s, border .2s, background .2s;
    @include button-style($default, $default-light, $default-dark);

    &:active {
        top: 1px;
    }

    @include is-disabled {
        box-shadow: none;
        text-shadow: none;
        top: 0;
        opacity: $disabled-opacity;
    }

    &.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); }
}

//-------------------- Carousel, Showcase --------------------//

.carousel-prev,
.carousel-next,
.showcase-prev,
.showcase-next {
    opacity: $carousel-opacity;

    .arrow-left,
    .arrow-right {
        color: #fff;
        font-size: 2rem;
    }

    &:hover { opacity: 1; }
}

.showcase-close {
    opacity: $showcase-opacity;

    .x { color: #fff; }

    &:hover { opacity: 1; }
}

//-------------------- Drop --------------------//

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

    ul { padding: $small-padding; }
    > ul { padding: 0; }

    li {
        > a {
            color: darken($info, 15%);

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

        &:hover > a {
            color: darken($info, 15%);
            background: $info-light;
        }

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

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

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

.drop-heading {
    color: $default;
    font-size: .8rem;
    background-color: $gray-dark !important;
}

.drop--up {
    box-shadow: 5px -5px black(.25);
}

.drop--left {
    box-shadow: -5px 5px black(.25);
}

.drop-desc {
    display: block;
    color: $gray-darkest;
    font-size: .7rem;
}

//-------------------- 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; }

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

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

.flyout-heading,
.type-ahead-heading {
    background: $gray-dark;
}

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

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

//-------------------- Input --------------------//

.custom-input {
    .checkbox,
    .radio,
    .select {
        transition: all $default-transition;
    }

    input {
        &:checked + .checkbox,
        &:checked + .radio {
            box-shadow: 0 0 5px $info-light;
        }
    }

    select:focus + .select,
    .select.is-active {
        box-shadow: 0 0 5px $info-light;
    }

    .select.is-active {
        .caret-down {
            top: -5px;
            transform: rotate(-180deg);
        }
    }
}

/*.input-group {
    > .button { height: 44px; }

    &.small > .button { height: 30px; }
    &.large > .button { height: 59px; }
*/

.input-addon {
    background: $gray;
    border: 1px solid $gray-dark;
}

//-------------------- Label --------------------//

@mixin label-style($bg, $text) {
    background: $bg;
    color: $text;

    @content;
}

.label,
.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--arrow-left {
    @extend .label;

    &: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--arrow-right {
    @extend .label;

    &: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; }
}

.label--ribbon-left {
    @extend .label;

    &:after { border-right-color: darken($default, 15%); }
    &.is-info:after { border-right-color: darken($info-light, 15%); }
    &.is-error:after { border-right-color: darken($error-light, 15%); }
    &.is-warning:after { border-right-color: darken($warning-light, 15%); }
    &.is-success:after { border-right-color: darken($success-light, 15%); }
}

.label--ribbon-right {
    @extend .label;

    &:after { border-left-color: darken($default, 15%); }
    &.is-info:after { border-left-color: darken($info-light, 15%); }
    &.is-error:after { border-left-color: darken($error-light, 15%); }
    &.is-warning:after { border-left-color: darken($warning-light, 15%); }
    &.is-success:after { border-left-color: darken($success-light, 15%); }
}

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

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

.modal-head {
    background: $gray-lightest;
}

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

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

//-------------------- Notice --------------------//

@mixin notice-style($bg, $text) {
    color: $text;
    background: lighten($bg, 5%);
    border: 1px solid $bg;

    hr { border-color: darken($bg, 10%); }

    a { color: darken($text, 10%); }
    a:hover { color: lighten($text, 25%); }

    @content;
}

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

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

//-------------------- 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);
        transform: translateY(6px);

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

    &.center-left .popover-arrow {
        border-left-color: black(.25);
        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 --------------------//

@mixin progress-style($bg, $border) {
    background: $bg;
    text-shadow: 1px 1px $border;
    border: 1px solid darken($bg, 12%);

    @content;
}

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

.progress-bar {
    color: #fff;
    font-weight: bold;
    @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); }
}

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

.showcase-inner {
    background: $gray;
    padding: 5px;
    border-radius: .2rem;
}

.showcase-caption {
    color: #fff;
    line-height: 125%;
    font-size: .9rem;
}

.showcase-items {
    background: #000;
}

//-------------------- Step --------------------//

.steps ol {
    border: 1px solid $gray-dark;
    background: $gray;
}

.step:after {
    background: $gray;
    border-right: 1px solid $gray-dark;
    border-bottom: 1px solid $gray-dark;
}

a.step:hover,
a.step:hover:after {
    background: $gray-lightest;
}

.steps li.is-complete {
    a.step,
    a.step:after {
        background: $info;
        color: #fff;
    }
}

//-------------------- Switch --------------------//

.switch {
    overflow: hidden;
    background: $gray-light;
    border: 1px solid $gray-dark;

    input:checked + .switch-bar {
        background: $info;
        color: #fff;
    }
}

.switch-toggle {
    background: #fff;
}

.switch--stacked input:not(:checked) + .switch-bar:before,
.switch--stacked input:checked + .switch-bar:after {
    color: $foreground-color;
}

//-------------------- 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;
}