// Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/* ========================================================================
   Name:            Bootstrap layer
   Description:     Compatibility layer to match UIkit and Bootstrap style
 ========================================================================== */

@bs-input-height:           20px;
@bs-control-input-height:   @bs-input-height;
@bs-button-height:          22px;


/* Button overrides
 ========================================================================== */

.btn {
    /* Reset */
    border: none; /* Todo */
    border-radius: 0;
    border-color: transparent;
    box-shadow: none;
    text-shadow: none;
    /* Overrides */
    line-height: @bs-button-height;
    background: @button-background;
    color: @button-color;
    .hook-button;
}

.btn:hover,
.btn:focus {
    /* Reset */
    background-position: 0 0;
    -webkit-transition: none;
    transition: none;
    /* Overrides */
    background-color: @button-hover-background;
    color: @button-hover-color;
    .hook-button-hover;
}

.btn.active,
.btn:active {
    /* Reset */
    box-shadow: none;
    /* Overrides */
    background-color: @button-active-background;
    color: @button-active-color;
    .hook-button-active;
}

/* Primary */
.btn-primary,
.btn-info,
.btn-inverse {
    background-color: @button-primary-background;
    color: @button-primary-color;
    .hook-button-primary;
}

.btn-primary:hover,
.btn-info:hover,
.btn-inverse:hover {
    background-color: @button-primary-hover-background;
    color: @button-primary-hover-color;
    .hook-button-primary-hover;
}

.btn-primary:active, .btn-primary.active,
.btn-info:active, .btn-info.active,
.btn-inverse:active, .btn-inverse.active {
    background-color: @button-primary-active-background;
    color: @button-primary-active-color;
    .hook-button-primary-active;
}

/* Danger */
.btn-danger,
.btn-warning {
    background-color: @button-danger-background;
    color: @button-danger-color;
    .hook-button-danger;
}

.btn-danger:hover,
.btn-warning:hover {
    background-color: @button-danger-hover-background;
    color: @button-danger-hover-color;
    .hook-button-danger-hover;
}

.btn-danger:active, .btn-danger.active,
.btn-warning:active, .btn-warning.active {
    background-color: @button-danger-active-background;
    color: @button-danger-active-color;
    .hook-button-danger-active;
}

/* Success */
.btn-success {
    background-color: @button-success-background;
    color: @button-success-color;
    .hook-button-success;
}

.btn-success:hover {
    background-color: @button-success-hover-background;
    color: @button-success-hover-color;
    .hook-button-success-hover;
}

.btn-success:active, .btn-success.active {
    background-color: @button-success-active-background;
    color: @button-success-active-color;
    .hook-button-success-active;
}

/* Disabled */
.btn.disabled,
.btn[disabled] {
    background-color: @button-disabled-background;
    color: @button-disabled-color;
    .hook-button;
    .hook-button-disable;
}

/* Link */
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.uk-active,
.btn-link:disabled {
    display: inline;
    border: none;
    background: none;
    .hook-button-link;
}

/* Color */
.btn-link { color: @button-link-color; }
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.uk-active { color: @button-link-hover-color; }
.btn-link:disabled { color: @button-link-disabled-color; }

// Button Sizes
// Large
.btn-large { .hook-button-large; }

/* Dropdown caret */
.btn .caret {
    /* Reset */
    margin-bottom: 0;
    /* Overrides */
    border-top-color: @button-color;
}

// Icons
.btn [class^="icon-"],
.btn [class*=" icon-"] {
    margin-top: (@bs-button-height - 14px) / 2; /* 14px = icon height */
    vertical-align: top;
}

.caret {
    /* Reset */
    margin-top: 0 !important;
    /* Override */
    vertical-align: middle !important;
}


/* Button group overrides
 ========================================================================== */

.btn-group > .btn + .dropdown-toggle { box-shadow: none; }

.btn-group.open {

    .btn.dropdown-toggle { .hook-button-active; }
    .btn-primary.dropdown-toggle { .hook-button-primary-active; }
    .btn-danger.dropdown-toggle { .hook-button-danger-active;}
    .btn-success.dropdown-toggle { .hook-button-success-active; }

}


/* Form overrides
 ========================================================================== */

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    /* Reset */
    border-radius: 0;
    box-shadow: none;
    /* Overrides */
    height: @bs-input-height;
    line-height: @bs-input-height;
    color: @form-color;
    .hook-form;

    &:focus {
        /* Reset */
        box-shadow: none;
        /* Overrides */
        border-color: @form-focus-border;
        outline: 0;
        background: @form-focus-background;
        .hook-form-focus;
    }
}

select { border-color: @form-border; }

select, input[type="file"] {
    height: auto;
    line-height: auto;
}

.input-append input { border-radius: @baseBorderRadius 0 0 @baseBorderRadius; }

.input-append .add-on,
.input-prepend .add-on {
    /* Reset */
    text-shadow: none;
    /* Overrides */
    height: @bs-input-height;
    line-height: @bs-input-height;
    border-color: @form-border;
    background-color: darken(@form-background, 5%);
}

.row-fluid input[class*="span"] { min-height: @bs-input-height; }

.input-append .add-on:first-child,
.input-append .btn:first-child,
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child,
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child { border-radius: @baseBorderRadius 0 0 @baseBorderRadius; }

.input-append,
.input-prepend {

    > .btn { position: relative; }

    > .btn:hover,
    > .btn:focus,
    > .btn:active,
    > .btn.active { z-index: 2; }

}

.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-prepend .add-on:last-child,
.input-prepend .btn:last-child,
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child { border-radius: 0 @baseBorderRadius @baseBorderRadius 0; }

.input-block-level { min-height: auto; }

input.search-query { border-radius: @baseBorderRadius; }

.form-search .input-append .search-query { border-radius: @baseBorderRadius 0 0 @baseBorderRadius; }
.form-search .input-append .btn { border-radius: 0 @baseBorderRadius @baseBorderRadius 0; }
.form-search .input-prepend .search-query { border-radius: 0 @baseBorderRadius @baseBorderRadius 0; }
.form-search .input-prepend .btn { border-radius: @baseBorderRadius 0 0 @baseBorderRadius; }

.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
    box-shadow: none;
    border-color: @form-danger-border !important;
    background: @form-danger-background !important;
    color: @form-danger-color !important;
    .hook-form-danger;

    &:focus { box-shadow: none; }
}

.control-group input {
    height: @bs-control-input-height;
    min-height: @bs-control-input-height !important;
    line-height: @bs-control-input-height;
}

.control-group.warning,
.control-group.error {
    label,
    .help-block,
    .help-inline { color: @form-danger-color;   }
}

.control-group.success input,
.control-group.success select,
.control-group.success textarea {
    box-shadow: none;
    border-color: @form-success-border !important;
    background: @form-success-background !important;
    color: @form-success-color !important;
    .hook-form-success;

    &:focus { box-shadow: none; }
}

.control-group.success {
    label,
    .help-block,
    .help-inline { color: @form-success-color; }
}

.form-actions { border: none; }


/* Dropdown overrides
 ========================================================================== */

.dropdown-menu {
    /* Reset */
    border-radius: 0;
    border: none;
    box-shadow: none;
    /* Overrides */
    margin-top: @dropdown-margin-top;
    padding: @dropdown-padding;
    background: @dropdown-background;
    .hook-dropdown;
}

.dropdown-menu > li > a {
    /* Reset */
    font-weight: inherit;
    line-height: inherit;
    /* Overrides */
    color: @nav-side-color;
    padding: @nav-padding-vertical @nav-padding-horizontal;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
    background: @nav-dropdown-hover-background;
    .hook-nav-dropdown-hover;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: @nav-dropdown-hover-background;
    .hook-nav-dropdown-hover;
}


/* Well overrides
 ========================================================================== */

.well {
    /* Reset */
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Overrides */
    padding: @panel-box-padding !important;
    background: @panel-box-background;
    .hook-panel-box;
}


/* Hero-unit overrides
 ========================================================================== */

.hero-unit {
    /* Reset */
    border-radius: 0;
    /* Overrides */
    background: @panel-box-background;
    .hook-panel-box;
}


/* Tooltip overrides
 ========================================================================== */

.tooltip.in { opacity: 1; }


/* Alert overrides
 ========================================================================== */

.alert {
    /* Reset */
    border-radius: 0;
    border: none;
    text-shadow: none;
    /* Overrides */
    background: @alert-warning-background;
    color: @alert-warning-color;
    .hook-alert;
    .hook-alert-warning;
}

.alert-success {
    background: @alert-success-background;
    color: @alert-success-color;
    .hook-alert-success;
}

.alert-danger,
.alert-error {
    background: @alert-danger-background;
    color: @alert-danger-color;
    .hook-alert-danger;
}

.alert-info {
    background: @alert-background;
    color: @alert-color;
    .hook-alert;
}


/* Badge overrides
 ========================================================================== */

.label,
.badge {
    /* Reset */
    text-shadow: none;
    /* Overrides */
    padding: 0 @badge-padding-horizontal;
    background: @badge-background;
    font-size: @badge-font-size;
    line-height: @badge-line-height;
    color: @badge-color;
    text-align: center;
    font-weight: @badge-font-weight;
    vertical-align: middle;
    .hook-badge;
}

.badge {
    /* Overrides */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: @badge-notification-line-height;
    border-radius: 500px;
    font-size: @badge-notification-font-size;
    line-height: @badge-notification-line-height;
}

.label,
.badge {
    &-important         {
        background-color: @badge-danger-background;
        .hook-badge-danger;
    }
    &-warning           {
        background-color: @badge-warning-background;
        .hook-badge-warning;
    }
    &-success           {
        background-color: @badge-success-background;
        .hook-badge-success;
    }
}


/* Progress overrides
 ========================================================================== */

.progress {
    /* Reset */
    border-radius: 0;
    box-shadow: none;
    /* Overrides */
    background: @progress-background;
    .hook-progress;
}

.progress .bar {
    /* Reset */
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    /* Overrides */
    background-color: @progress-bar-background;
    color: @progress-bar-color;
    .hook-progress-bar;
}

.progress-danger .bar, .progress .bar-danger,
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
    background-color: @progress-bar-danger-background;
    .hook-progress-bar-danger;
}

.progress-success .bar, .progress .bar-success,
.progress-success.progress-striped .bar, .progress-striped .bar-success {
    background-color: @progress-bar-success-background;
    .hook-progress-bar-success;
}

.progress-info .bar, .progress .bar-info,
.progress-info.progress-striped .bar, .progress-striped .bar-info {
    background-color: @progress-bar-background;
    .hook-progress-bar;
}

.progress-warning .bar, .progress .bar-warning,
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
    background-color: @progress-bar-warning-background;
    .hook-progress-bar-warning;
}

.progress .bar + .bar { box-shadow: none; }

.progress-striped .bar {
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

/* Navbar overrides
 ========================================================================== */

.navbar-inverse .brand,
.navbar-inverse .nav > li > a { text-shadow: none; }


/* Navs overrides
 ========================================================================== */

.nav > li > a {
    color: @subnav-color;
    .hook-subnav;
}

.nav > li > a:hover,
.nav > li > a:focus {
    color: @subnav-hover-color;
    .hook-subnav-hover;
}

.nav-header {
    text-shadow: none;
    color: @nav-side-header-color;
}

/*
 * List
 */

.nav-list > li > a {
    /* Reset */
    text-shadow: none;
    /* Override */
    color: @nav-side-color;
    .hook-nav-side;
}

.nav-list .nav-header {
    /* Reset */
    text-shadow: none;
    /* Override */
    color: @nav-side-header-color;
    .hook-nav-side-header;
}

.nav-list > li > a:hover,
.nav-list > li > a:focus {
    background: @nav-side-hover-background;
    color: @nav-side-hover-color;
    .hook-nav-side-hover;
}

.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
    text-shadow: none;
    color: @nav-side-active-color;
    background-color: @nav-side-active-background;
}

.nav-list .divider {
    border-color: @nav-dropdown-divider-border;
    background: transparent;
}

/*
 * Pills
 */

.nav-pills > li > a {
    /* Reset */
    border-radius: 0;
    line-height: inherit;
    /* Override */
    padding: @subnav-pill-padding-vertical @subnav-pill-padding-horizontal;
    .hook-subnav-pill;
}

.nav-pills > li > a:hover {
    background: @subnav-pill-hover-background;
    color: @subnav-pill-hover-color;
    .hook-subnav-pill-hover;
}

.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
    /* Overrides */
    background: @subnav-pill-active-background;
    color: @subnav-pill-active-color;
    .hook-subnav-pill-active;
}

.nav-pills li.dropdown a:hover .caret,
.nav-pills li.dropdown a:focus .caret {
    border-top-color: @subnav-pill-hover-color;
    border-bottom-color: @subnav-pill-hover-color;
}

/* Open dropdowns */
.nav-pills li.dropdown.open .caret,
.nav-pills li.dropdown.open.active .caret,
.nav-pills li.dropdown.open a:hover .caret,
.nav-pills li.dropdown.open a:focus .caret {
    border-top-color: @subnav-pill-hover-color;
    border-bottom-color: @subnav-pill-hover-color;
}

.nav-pills .open .dropdown-toggle {
    background: @subnav-pill-hover-background;
    color: @subnav-pill-hover-color;
    .hook-subnav-pill-hover;
}

.nav-pills .dropdown-menu { border-radius: @baseBorderRadius; }

.nav-pills .dropdown-toggle .caret { margin-left: 5px; }

/*
 * Tabs Stacked
 */

.nav-tabs.nav-stacked > li > a {
    border-color: @tab-border;
    border-radius: 0;
}

.nav-tabs.nav-stacked > li:first-child > a { border-top-radius: @baseBorderRadius; }
.nav-tabs.nav-stacked > li:last-child > a { border-bottom-radius: @baseBorderRadius; }
.nav-tabs.nav-stacked > li > a:hover,
.nav-tabs.nav-stacked > li > a:focus {
    border-color: @tab-border;
    z-index: 2;
}

/*
 * Tabs
 */

.nav-tabs { border-bottom: 1px solid @tab-border; }

.nav-tabs > li > a {

    border-radius: @baseBorderRadius @baseBorderRadius 0 0;
    /* Overrides */
    padding: @tab-padding-top @tab-padding-horizontal @tab-padding-bottom @tab-padding-horizontal;

    &:hover {
        border-color: @tab-hover-border;
        border-bottom-color: @tab-border;
        background: @tab-hover-background;
        color: @tab-hover-color;
        .hook-tab-hover;
    }

}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
    color: @tab-active-color;
    background-color: @tab-active-background;
    border: 1px solid @tab-border;
    border-bottom-color: transparent;
    .hook-tab-active;
}

.tabs-below > .nav-tabs { border-top: 1px solid @tab-border; }
.tabs-below > .nav-tabs > li > a {

    border-radius: 0 0 @baseBorderRadius @baseBorderRadius;

    &:hover {
        border-color: @tab-hover-border;
        border-top-color: @tab-border;
    }

}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus { border-color: transparent @tab-border @tab-border @tab-border; }

.tabs-left > .nav-tabs { border-right: 1px solid @tab-border; }
.tabs-left > .nav-tabs > li > a {

    border-radius: @baseBorderRadius 0 0 @baseBorderRadius;

    &:hover {
        border-color: @tab-hover-border;
        border-right-color: @tab-border;
    }

}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus { border-color: @tab-border transparent @tab-border @tab-border; }

.tabs-right > .nav-tabs { border-left: 1px solid @tab-border; }
.tabs-right > .nav-tabs > li > a {

    border-radius: 0 @baseBorderRadius @baseBorderRadius 0;

    &:hover {
        border-color: @tab-hover-border;
        border-left-color: @tab-border;
    }

}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus { border-color: @tab-border @tab-border @tab-border transparent; }

/*
 * Dropdowns
 */

.nav-tabs .dropdown-menu { border-radius: 0 0 @baseBorderRadius @baseBorderRadius; }

/* Open dropdowns */
.nav-tabs .open .dropdown-toggle {
    /* Overrides */
    border-color: @tab-hover-border;
    background: @tab-hover-background;
    color: @tab-hover-color;
    .hook-tab-hover;
}

.nav-tabs li.dropdown.open .caret,
.nav-tabs li.dropdown.open.active .caret,
.nav-tabs li.dropdown.open a:hover .caret,
.nav-tabs li.dropdown.open a:focus .caret {
    border-top-color: @tab-hover-color;
    border-bottom-color: @tab-hover-color;
}

.nav-tabs .dropdown-toggle .caret { margin-left: 5px; }


/* Breadcrumb overrides
 ========================================================================== */

.breadcrumb {
    background-color: @panel-box-background;
    > li > .divider { color: inherit; }
    > .active { color: @global-muted-color; }
}

.breadcrumb li { text-shadow: none; }


/* Accordion overrides
 ========================================================================== */

.accordion-group { border-color: @tab-border; }

.accordion-inner { border-top-color: @tab-border; }


/* Pager overrides
 ========================================================================== */

.pager li > a,
.pager li > span {
    border: none;
    background-color: @pagination-background;
    border-radius: @baseBorderRadius;
    color: @pagination-color;
}

.pager li > a:hover,
.pager li > a:focus {
    background-color: @pagination-hover-background;
    color: @pagination-hover-color;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
    color: @pagination-disabled-color;
    background-color: @pagination-disabled-background;
}


/* Pagination overrides
 ========================================================================== */

.pagination ul { box-shadow: none; }

.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span { background-color: transparent; }


/* Scaffolding overrides
 ========================================================================== */

.img-polaroid {
    background-color: @panel-box-background;
    border-color: @global-border;
    box-shadow: none;
}


/* Thumbnail overrides
 ========================================================================== */

.thumbnail {
    border-color: @thumbnail-border;
    box-shadow: none;
}

a.thumbnail:hover,
a.thumbnail:focus {
    border-color: @thumbnail-hover-border;
    box-shadow: none;
}

.thumbnail .caption { color: @thumbnail-caption-color; }


/* Modal overrides
 ========================================================================== */

.modal-backdrop { background: @modal-background; }

div.modal {
    /* Reset */
    border: none;
    box-shadow: none;
    /* Overrides */
    border-radius: @baseBorderRadius;
    background: @modal-dialog-background;
    .hook-modal-dialog;
}

.modal-header { border-color: @global-border; }

.modal-footer {
    background: @panel-box-background;
    border-color: @global-border;
    border-radius: 0 0 @baseBorderRadius @baseBorderRadius;
    box-shadow: none;
}


/* Table overrides
 ========================================================================== */

.table tbody tr {
    &.success td {
        color: @alert-success-color;
    }
    &.error td {
        color: @alert-danger-color;
    }
    &.warning > td {
        color: @alert-warning-color;
    }
    &.info td {
        color: @alert-color;
    }
}


/* Code
 ========================================================================== */

code { .hook-base-code; }

pre { .hook-base-pre; }


/* Close
 ========================================================================== */

.close {
    color: inherit;
    &:hover,
    &:focus {
        color: inherit;
    }
}


/* Joomla Bootstrap Extended
 ========================================================================== */

a.disabled,
a.disabled:hover {
    background-color: @button-disabled-background;
    color: @button-disabled-color;
    .hook-button;
    .hook-button-disable;
}