/**
 * @version    $Id$
 * @package    IT_Theme_Framework
 * @author     InnoThemes Team <support@innothemes.com>
 * @copyright  Copyright (C) 2012 InnoThemes.com. All Rights Reserved.
 * @license    GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Websites: http://www.innothemes.com
 */

//= Import Variables & Mixins
@import "variables_po";
@import "mixins_po";

#it-theme-options {
    input,
    textarea,
    select {
        .box-sizing;
        .box-shadow;
        .margin(0);
        &:focus {
            border-color: @gray-light;
            .box-shadow;
        }
    }
    a {
        text-decoration: none;
    }
    .ui-widget {
        font-family: @font-base;
        z-index: 98 !important;
        .ui-tabs-nav {
            .border-radius;
            li a {
                color: @gray;
            }
        }
        .ui-tabs-panel {
            .it-form-accordion {
                .ui-accordion-header {
                    .box-shadow;
                    .margin-top(15px);
                    &:first-child {
                        .margin(0);
                    }
                    &:hover {
                        cursor: pointer;
                    }
                    .ui-accordion-header-icon {
                        display: block;
                        .base-left(auto);
                        .base-right(6px);
                        &.ui-icon-triangle-1-s {
                            background-position: -64px 0;
                        }
                        &.ui-icon-triangle-1-e {
                            background-position: -32px 0;
                        }
                    }
                }
                .ui-accordion-content {
                    .margin(0);
                    .it-form-state-switcher {
                        .btn {
                            color: @white-color;
                            &.turn-off {
                                background-color: @brand-danger;
                            }
                            &.turn-on {
                                background-color: @brand-success
                            }
                        }
                    }
                }
            }
            //= Font Attributes
            .it-form-field-typography {
                .it-form-field-color-picker {
                    input {
                        display: none;
                    }
                    .input-group-btn .btn {
                        border-color: @thumbnail-border;
                        .border-radius(0);
                        .margin-left(5px);
                        .padding(6px 10px);
                    }
                }
                .it-form-field-typography-font-size {
                    width: 25% !important;
                }
                .it-form-field-typography-font-unit {
                    width: 25% !important;
                    .margin-left(5px);
                }
                .it-form-field-typography-font-display {
                    width: 39.5% !important;
                    .margin-left(5px);
                }
            }
            [id*="_font_attributes"].it-form-field-typography  [class*="it-form-field-typography-font-"] {
                .float;
            }
            .chzn-container {
                border: 0;
                width: 218px !important;
                .padding(0);
                .chzn-single {
                    background: none;
                    border: 1px solid @thumbnail-border;
                    height: 30px;
                    line-height: 28px;
                    .border-radius;
                    .box-shadow;
                    div {
                        border-left: 1px solid @thumbnail-border;
                        .padding(4px 2px 0 10px);
                    }
                }
                .chzn-drop {
                    border-color: @thumbnail-border;
                    .chzn-results {
                        max-height: 120px;
                    }
                }
            }
        }
        .it-form-field-column-settings {
            text-align: center;
            .margin-bottom(0);
            .thumbnails {
                overflow: hidden;
                .clearfix;
                .margin(0 auto);
                > li {
                    .float;
                    .margin(0 11px 0 0);
                    a:hover {
                        color: @gray-light;
                    }
                    .thumbnail {
                        margin-bottom: 0;
                    }
                }
            }
            .it-form-field-column-settings-grid-preview {
                display: none;
                div {
                    background-color: @gray;
                    top: 0 !important;
                    width: 4px;
                    z-index: 99;
                    .opacity(.33);
                    .position(absolute);
                }            
            }
        }  
    }

    //= Form
    .it-form {
        .pull-left {
            .margin(0 5px 5px 0);
            &:hover {
                cursor: pointer;
            }
        }
        .it-thumbnail {
            border: 3px solid @white-dark;
            .border-radius(3px);
            .padding(2px);
            .transition(all 0.7s ease 0s);
            &:hover {
                border-color: #bbb;
            }
        }
        .it-form-field-radio-image-selected,
        .it-form-field-checkbox-image-selected {
            border-color: @gray;
        }
    }
    #it-form-field-responsive_layout.it-form i {
        color: #888;
        font-size: 1.8em;
        &.it-form-field-checkbox-image-selected {
            color: @black-color;
        }
    }
    .it-form-field-color-picker.input-group .input-group-btn > .btn,
    .it-form-field-date-picker.input-group .ui-datepicker-trigger,
    .it-form-field-media-selector.input-group span:nth-child(2) > .btn  {
        .border-left-radius(0);
        .margin-left(-1px);
    }
    .it-form-field-date-picker.input-group {
        .ui-datepicker-trigger {
            .padding(4px 10px);
        }
        .form-control.hasDatepicker {
            width: 417px;
        }
    }
    
    //= Social Chanel
    .it-form-field-social-channels {
        .it-sortable-list {
            width: 100%;
            .it-item {
                border: 0;
                border-left: 2px solid;
                .margin(0 0 2px);
                .padding(6px 10px);
                input.checkbox {
                    .margin-top(-4px);
                }
            }
        }
        .btn {
            width: 40px;
            .margin-top(10px);
        }
    }
}

.ui-widget-overlay {
    .position(fixed);
    z-index: 98;
}
/* Modal */
.ui-dialog {
    border: 0;
    .border-radius(0);
    .box-shadow(0 3px 10px rgba(0, 0, 0, 0.3));
    .padding(0);
    input[type="text"] {
        font-size: 0.85em;
        width: 100%;
        .box-shadow;
        .border-radius(0);
        .margin(0);
        .padding(6px);
        &:focus {
            border-color: @gray-light;
            .box-shadow;
        }
    }
    .ui-dialog-titlebar {
        border-bottom: 1px solid darken(@white-color, 6.4%);
        .ui-dialog-title {
            font-weight: 300;
            .padding(10px 0);
        }
        .ui-button {
            background: none;
            border: 0;
            .box-shadow(none);
            .margin-top(-15px);
        }
    }
    .ui-dialog-content {
        .margin(0);
        .padding(10px);
        ul {
            .margin(0);
        }
    }
    #it-social-channels-modal {
        .form-horizontal {
            overflow: hidden;
            .form-group {
                .clearfix;
                .margin-bottom(15px);
            }
        }
        label {
            font-size: 0.9em;
            text-align: right;
            font-weight: 600;
            .margin-top(5px);
        }
    }
}

[id*="-meta-box"].form-horizontal .form-group {
    .clearfix;
    .margin-bottom(20px);
    input {
        width: 100%;
    }
    label {
        font-size: 0.9em;
        text-align: right;
        font-weight: 600;
        .margin-top(5px);
    }
}

/* Bootstrap v3.1.0 IT Custom */
// Grid System
// -----------
.row {
    .make-row();
    .clearfix;
}
.make-grid-columns-float(xs);
.make-grid(@grid-columns, xs, width);
// Restyle and baseline non-control form elements.
#it-theme-options {
    fieldset {
        border: 0;
        min-width: 0;
        .padding(0);
        .margin(0);
    }
    label {
        display: inline-block;
        font-weight: bold;
        .margin-bottom(8px); 
    }
    input[type="radio"],
    input[type="checkbox"] {
        .margin(1px 0 0);
    }
    input[type="file"] {
        display: block;
    }
    .form-control {
        display: block;
        width: 100%;
        height: @input-height-base;
        padding: @padding-base-vertical @padding-base-horizontal;
        font-size: @font-size-base;
        line-height: @line-height-base;
        color: @input-color;
        background-color: @input-bg;
        background-image: none;
        border: 1px solid @input-border;
        .border-radius(4px);
        .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
    }
    .radio,
    .checkbox {
        display: block;
        min-height: @line-height-computed;
        .margin-top(10px);
        .margin-bottom(10px);
        .padding-left(20px);
        label {
            display: inline;
            font-weight: normal;
            cursor: pointer;
        }
    }
    .radio input[type="radio"],
    .radio-inline input[type="radio"],
    .checkbox input[type="checkbox"],
    .checkbox-inline input[type="checkbox"] {
        .float;
        .margin-left(-20px);
    }
    .radio + .radio,
    .checkbox + .checkbox {
        .margin-top(-5px);
    }
    .radio-inline,
    .checkbox-inline {
        display: inline-block;
        vertical-align: middle;
        font-weight: normal;
        cursor: pointer;
        .padding-left(20px);
        .margin-bottom(0);
    }
    .radio-inline + .radio-inline,
    .checkbox-inline + .checkbox-inline {
        .margin-top(0);
        .margin-left(10px);
    }
    input[type="radio"],
    input[type="checkbox"],
    .radio,
    .radio-inline,
    .checkbox,
    .checkbox-inline {
        &[disabled] {
            cursor: not-allowed;
        }
    }
    .input-sm {
        .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
    }
    textarea.input-sm {
        height: auto;
    }
    .input-lg {
        .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
    }
    &.form-horizontal {
        .control-label,
        .radio,
        .checkbox,
        .radio-inline,
        .checkbox-inline {
            .margin-top(0);
            .margin-bottom(0);
            padding-top: (@padding-base-vertical + 1);
        }
        .radio,
        .checkbox {
            min-height: (@line-height-computed + (@padding-base-vertical + 1));
        }
        .form-group {
            .clearfix;
            .margin-bottom(20px);
            .make-row();
        }
        .form-control-static {
            padding-top: (@padding-base-vertical + 1);
        }
        .control-label {
            text-align: right;
        }
    }
    //= Button
    .btn {
        display: inline-block;
        font-weight: @btn-font-weight;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        .margin-bottom(0);
        .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
        .user-select(none);
        &:focus {
            .tab-focus();
        }
        &:hover,
        &:focus {
            color: @btn-default-color;
            text-decoration: none;
        }
        &:active,
        &.active {
            outline: 0;
            background-image: none;
            .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
        }
        &.disabled,
        &[disabled],
        fieldset[disabled] .btn {
            cursor: not-allowed;
            pointer-events: none;
            .opacity(.65);
            .box-shadow(none);
        }
    }
    .btn-default {
        .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
    }
    .btn-primary {
        .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
    }
    .btn-success {
        .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
    }
    .btn-danger {
        .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
    }
    .btn-sm {
        .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
    }
    .btn-group,
    .btn-group-vertical {
        display: inline-block;
        vertical-align: middle;
        .position;
        > .btn {
            .position;
            .float;
            &:hover,
            &:focus,
            &:active,
            &.active {
                z-index: 2;
            }
            &:focus {
                outline: none;
            }
        }
    }
    .btn-group {
        .btn + .btn,
        .btn + .btn-group,
        .btn-group + .btn,
        .btn-group + .btn-group {
            .margin-left(-1px);
        }
    }
    .btn-toolbar {
        margin-left: -5px; 
        &:extend(.clearfix all);
        .btn-group,
        .input-group {
            .float;
        }
        > .btn,
        > .btn-group,
        > .input-group {
            .margin-left(5px);
        }
    }
    .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
        .border-radius(0);
    }
    .btn-group > .btn:first-child {
        margin-left: 0;
            &:not(:last-child):not(.dropdown-toggle) {
            .border-right-radius(0);
        }
    }
    .btn-group > .btn:last-child:not(:first-child),
    .btn-group > .dropdown-toggle:not(:first-child) {
        .border-left-radius(0);
    }
    .btn-group > .btn-group {
        .float;
    }
    .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
    }
    .btn-group > .btn-group:first-child {
        > .btn:last-child,
        > .dropdown-toggle {
            .border-right-radius(0);
        }
    }
    .btn-group > .btn-group:last-child > .btn:first-child {
        .border-left-radius(0);
    }
    .btn-group .dropdown-toggle:active,
    .btn-group.open .dropdown-toggle {
        outline: 0;
    }
    .btn-group-sm > .btn { 
        .btn-sm();
    }
    // Input Groups
    .input-group {
        display: table;
        border-collapse: separate;
        .position;
        &[class*="col-"] {
            .float(none);
            .padding-left(0);
            .padding-right(0);
        }

        .form-control {
            .float;
            width: 100%;
            display: table-cell;
            .margin-bottom(0);
        }
    }
    .input-group-sm > .form-control,
    .input-group-sm > .input-group-addon,
    .input-group-sm > .input-group-btn > .btn { 
        .input-sm(); 
    }
    .input-group .form-control:first-child,
    .input-group-btn:first-child > .btn,
    .input-group-btn:first-child > .btn-group > .btn,
    .input-group-btn:first-child > .dropdown-toggle,
    .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
    .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
        .border-right-radius(0);
    }
    .input-group .form-control:last-child,
    .input-group-btn:last-child > .btn,
    .input-group-btn:last-child > .btn-group > .btn,
    .input-group-btn:last-child > .dropdown-toggle,
    .input-group-btn:first-child > .btn:not(:first-child),
    .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
        .border-left-radius(0);
    }
    .input-group-btn {
        display: table-cell; 
        font-size: 0;
        vertical-align: middle;
        white-space: nowrap;
        width: 1%;
        .position;
        > .btn {
            .position;
            + .btn {
                .margin-left(-1px);
            }
            &:hover,
            &:focus,
            &:active {
                z-index: 2;
            }
        }
        &:first-child {
            > .btn,
            > .btn-group {
                .margin-right(-1px);
            }
        }
        &:last-child {
            > .btn,
            > .btn-group {
               .margin-left(-1px);
            }
        }
    }
    // Thumbnail
    .thumbnail {
        display: block;
        line-height: @line-height-base;
        background-color: @thumbnail-bg;
        border: 1px solid @thumbnail-border;
        .border-radius(@thumbnail-border-radius);
        .padding(@thumbnail-padding);
        .margin-bottom(@line-height-computed);
        .transition(all .2s ease-in-out);
        .caption {
            padding: @thumbnail-caption-padding;
            color: @thumbnail-caption-color;
        }
    }
    .hide {
        display: none;
    }
    .pull-left {
        .float;
    }
}