// ------------------------------------------------------------------
// Bootstrap variables
// ------------------------------------------------------------------

//== Grid
@grid-gutter-width: @flectra-horizontal-padding*2;

//== Colors
@gray-lighter: @flectra-color-silver;

@brand-primary: #009efb;
@brand-success: #5cb85c;
@brand-info: #31708f;
@brand-warning: orange;
@brand-danger: #d9534f;

//== Titles
@font-size-h1: @flectra-font-size-base + 13px;
@font-size-h2: @flectra-font-size-base + 7px;
@font-size-h3: @flectra-font-size-base + 3px;
@font-size-h4: @flectra-font-size-base + 2px;
@font-size-h5: @flectra-font-size-base + 1px;
@font-size-h6: @flectra-font-size-base;

//== Scaffolding
@body-bg: @flectra-brand-secondary;
@text-color: @flectra-main-text-color;
@link-color: @flectra-brand-optional;
@link-hover-decoration: none;

//== Typography
@font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
@font-size-base: @flectra-font-size-base;
@headings-font-weight: bold;

//== Components
@component-active-bg: @gray-lighter;
@component-active-color: @flectra-brand-optional;

//== Badges
@badge-bg: @flectra-brand-optional;
@badge-color: white;
@badge-line-height: @line-height-base;
@badge-font-weight: normal;

//== Control Panel
@flectra-control-panel-background-color: @flectra-color-silver;

//== Breadcrumbs
@breadcrumb-active-color: #777777;
@breadcrumb-bg: @flectra-control-panel-background-color;
@breadcrumb-color: #777777;
@breadcrumb-padding-horizontal: 0;
@breadcrumb-padding-vertical: 0;

//== Buttons
@btn-default-bg: white;
@btn-default-border: #cccccc;
@btn-default-color: @flectra-main-text-color;
@btn-primary-bg: @flectra-brand-optional;
@btn-primary-border: @flectra-brand-optional;
@btn-primary-color: white;

//== Dropdowns
@dropdown-bg: white;
@dropdown-border: @gray-lighter-dark;
@dropdown-divider-bg: @gray-lighter-dark;
@dropdown-link-color: @flectra-main-text-color;
@dropdown-link-hover-color: @gray-dark;
@dropdown-link-hover-bg: @gray-lighter;
@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;

//== Modals
@modal-sm: 300px;
@modal-md: 650px;
@modal-lg: 980px;
@modal-inner-padding: @flectra-horizontal-padding;
@modal-title-padding: @flectra-horizontal-padding;

// Change the z-index of the modal-backdrop elements to be equal to the
// modal elements' ones. Bootstrap does not support multi-modals, and without
// this rule all the modal-backdrops are below all the opened modals.
// Indeed, bootstrap forces them to a lower z-index as the modal-backdrop
// element (unique in their supported cases) might be put after the modal
// element (if the modal is already in the DOM, hidden, then opened). This
// cannot happen in flectra though as modals are not hidden but removed from
// the DOM and are always put at the end of the body when opened.
//
// Note that the variable @zindex-modal-background may be renamed/removed in
// newer versions of bootstrap.
//
// TODO the following code was disabled because it is saas-incompatible
//
// @zindex-modal-background: @zindex-modal;

//== Navs
@nav-link-padding: 10px 15px;
@nav-pills-border-radius: 0;
@nav-pills-active-link-hover-color: white;
@nav-pills-active-link-hover-bg: @flectra-brand-optional;
@nav-tabs-active-link-hover-bg: white;

//== Navbar
@navbar-height: @flectra-navbar-height + 28;
@navbar-margin-bottom: 0;
@navbar-inverse-bg: @brand-primary;
@navbar-inverse-link-color: #ffffff;
@navbar-inverse-link-hover-bg: darken(@brand-primary, 5%);
@navbar-inverse-toggle-hover-bg: #222222;
@navbar-border-radius: 0;

//== Tables
@table-bg-accent: #efeff8; // FIXME: expose

//== menu launcher
@launcher-menu-bg : #f7f9fa;
@launcher-menu-border : #eaeaea;

// ------------------------------------------------------------------
// Bootstrap components rules (non exposed features variables)
// ------------------------------------------------------------------

//== Badges
.badge {
    margin: 1px 2px 1px 0;
    padding-top: 0;
    padding-bottom: 0;
}

//== Buttons
// Mixin to define variations for btn-links and muted btn-links
.o-btn-link-variant(@color, @color-active) {
    text-transform: none;
    .o-hover-text-color(@default-color: @color, @hover-color: @color-active);

    &, &:hover, &:focus, &:active, &.active {
        border-color: transparent;
        background-color: transparent
    }

    &.text-muted, .text-muted {
        .o-hover-opacity();
        .o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active);
    }
}
.btn-icon {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-link {
    font-weight: @btn-font-weight;

    &.btn-default {
        .o-btn-link-variant(@text-color, @headings-color);
    }
    &.btn-success, &.text-success {
        .o-btn-link-variant(@text-color, @brand-success);
    }
    &.btn-warning, &.text-warning {
        .o-btn-link-variant(@text-color, @brand-warning);
    }
    &.btn-danger, &.text-danger {
        .o-btn-link-variant(@text-color, @brand-danger);
    }
    &.btn-info, &.text-info {
        .o-btn-link-variant(@text-color, darken(@brand-info, 20%));
    }
}

//== Printing improvements
@media print {
    .table-responsive {
        overflow-x: initial;
    }
}

@btn-default-color: #fff;
@btn-default-bg: @gray-light;
@btn-default-border: transparent;

@btn-primary-color: #fff;
@btn-primary-bg: @brand-success;
@btn-primary-border: transparent;

@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: transparent;

@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: transparent;

@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: transparent;

@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: transparent;