@import "../../../plugins/ax5core/src/ax5";

$ax5dialog-inner-border : 1px solid #BADC2D;
@import "../../../plugins/ax5ui-dialog/src/scss/ax5dialog_variables";
@import "../../../plugins/ax5ui-dialog/src/scss/ax5dialog";
.ax5-ui-dialog {
    .ax-dialog-body {
        .ax-dialog-buttons {
            .btn{
                padding: 5px 10px;
            }
        }
    }
}

$ax5mask-bg-opacity: 0.4;
@import "../../../plugins/ax5ui-mask/src/scss/ax5mask_variables";
@import "../../../plugins/ax5ui-mask/src/scss/ax5mask";

$ax5toast-border : 1px solid #BADC2D;
@import "../../../plugins/ax5ui-toast/src/scss/ax5toast_variables";
@import "../../../plugins/ax5ui-toast/src/scss/ax5toast";

//== modal
$ax5modal-z-index: 2000;
$ax5modal-box-model: border-box;
$ax5modal-bg: #000;
$ax5modal-border: 1px solid #BADC2D;
$ax5modal-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.60);
$ax5modal-body-padding: 0px;
$ax5modal-header-padding: $panel-heading-padding;

$ax5modal-header-addon-padding: 10px 10px;
$ax5modal-header-addon-btn-padding: 0px 2px;

$ax5modal-default-text: $panel-default-text;
$ax5modal-default-border: 1px solid #676767;
$ax5modal-default-header-bg: #252525;

@import "../../../plugins/ax5ui-modal/src/scss/ax5modal_variables";
@import "../../../plugins/ax5ui-modal/src/scss/ax5modal";

//== calendar
$ax5calendar-control-bg: ($panel-default-heading-bg); // color, (color1, color2), (pos, color1, color2) 모두 사용가능
$ax5calendar-control-border: 1px solid #949494;
$ax5calendar-control-border-radius: 5px;
$ax5calendar-control-font-size: ceil(($font-size-base * 1.25));
$ax5calendar-control-text-color: #BADC2D;
$ax5calendar-control-hover-text-color: $brand-primary;

$ax5calendar-header-bg: (#2A2A2A, #2A2A2A);
$ax5calendar-header-border: 0px none;
$ax5calendar-header-padding: 0px 2px;
$ax5calendar-header-font-size: ceil(($font-size-base * 0.8));

$ax5calendar-body-bg: (#2A2A2A, #2A2A2A);
$ax5calendar-body-border: 0px none;
$ax5calendar-body-font-size: ceil(($font-size-base * 1));
$ax5calendar-body-animation-in: ax5-ui-calendar-fadein;
$ax5calendar-body-animation-out: ax5-ui-calendar-fadeout;

$ax5calendar-sun-text-color: #C78B81;
$ax5calendar-sat-text-color: #32B4DC;

$ax5calendar-date-bg: (#343539, #343539);
$ax5calendar-date-text-color: #C3C4C6;
$ax5calendar-live-bg: (#000000, #000000);
$ax5calendar-live-text-color: #6D6E70;
$ax5calendar-hover-bg: (#BADC2D, #BADC2D);
$ax5calendar-hover-text-color: #000;
$ax5calendar-focus-bg: (#E67241, #E67241);
$ax5calendar-focus-text-color: #fff;
$ax5calendar-period-bg: (#82d3fa, #82d3fa);
$ax5calendar-period-text-color: #fff;
@import "../../../plugins/ax5ui-calendar/src/scss/ax5calendar_variables";
@import "../../../plugins/ax5ui-calendar/src/scss/ax5calendar";

//== picker
$ax5picker-easing-time-open: 0.1s;
$ax5picker-easing-time-close: 0.1s;
@import "../../../plugins/ax5ui-picker/src/scss/ax5picker_variables";
@import "../../../plugins/ax5ui-picker/src/scss/ax5picker";
.ax5-ui-picker {
    .ax-picker-body {
        .ax-picker-buttons {
            .btn{
                padding: 5px 10px;
            }
        }
    }
}

@import "../../../plugins/ax5ui-formatter/src/scss/ax5formatter_variables";
@import "../../../plugins/ax5ui-formatter/src/scss/ax5formatter";

@import "../../../plugins/ax5ui-menu/src/scss/ax5menu_variables";
@import "../../../plugins/ax5ui-menu/src/scss/ax5menu";

.ax5-ui-menubar {
    &.axboot {
        @include menubar-variant(#fff, #979797, #fff, #fff, #fff, transparent, $brand-info);

        .ax-menu-body {
            .ax-menu-item {
                padding: 0px 5px;
                .ax-menu-item-cell {
                    padding-left: 5px;
                    font-size: 1em;
                    //font-weight: bold;
                    //color: lighten(#2C2C2C, 10%);
                }
            }
        }

    }
}

.ax5-ui-menu {
    &.primary {
        @include menu-variant($brand-info, #fff, #4c4e54, #4c4e54, #fff, $body-bg, $brand-info);
        .ax-menu-body {
            .ax-menu-item {
                .ax-menu-item-cell {
                    font-size: 0.9em;
                }
            }
        }
    }
    &.axboot {
        @include menu-variant($brand-info, $brand-info, #4c4e54, #4c4e54, #fff, $body-bg, $brand-info);
        .ax-menu-body {
            .ax-menu-item {
                height: 20px;

                .ax-menu-item-cell {
                    font-size: 0.92em;
                    line-height: 20px;
                }

                &:hover, &.hover {
                    .ax-menu-item-cell {
                        &.ax-menu-item-checkbox {
                            .item-checkbox-wrap {
                                &:after {

                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

$ax5select-label-bg-colors: (#000, #000);
$ax5select-label-border: 1px solid #676767;
$ax5select-label-color: #BADC2D;

$ax5select-option-group-bg: lighten(#2a2a2a, 5%);

$ax5select-default-base-color: $gray;
$ax5select-default-theme-color: #2a2a2a;
$ax5select-default-hover-type: darken, 20%;

@import "../../../plugins/ax5ui-select/src/scss/ax5select_variables";
@import "../../../plugins/ax5ui-select/src/scss/ax5select";

//
//==
$ax5grid-border: 1px solid #676767;
$ax5grid-bg: #2A2A2A;
$ax5grid-font-size: 12px;
$ax5grid-column-border: 1px solid #676767;

//== header
$ax5grid-header-column-color: #79DBD7;
$ax5grid-header-column-border: 1px solid #676767;
$ax5grid-header-column-box-shadow: none;
$ax5grid-header-column-bg-colors: (#444, #000);
$ax5grid-header-column-hover-bg-colors: (#000, #000);
$ax5grid-header-column-resizer-color: #BADC2D;
$ax5grid-header-column-resizer-size: 4px;
$ax5grid-header-sorter-size: 10px;
$ax5grid-header-sorter-color: #BADC2D;

//== aside
$ax5grid-aside-border: 1px solid darken(#676767, 0%);
$ax5grid-aside-bg: #3a3c40;
$ax5grid-aside-column-shadow: inset 1px 1px 0px 0px #444;

$ax5grid-frozen-line-border: 1px solid darken(#676767, 10%);

//== footsum
$ax5grid-footsum-bg: #3a3c40;
$ax5grid-footsum-line-border: 1px solid darken(#676767, 10%);

//== page
$ax5grid-page-border: 1px solid #676767;
$ax5grid-page-bg-colors: (#444, #000);
$ax5grid-page-navigation-padding: 5px;
$ax5grid-page-navigation-font-size: 12px;
$ax5grid-page-navigation-btn-min-width: 20px;
$ax5grid-page-navigation-btn-border: 0px none;
$ax5grid-page-navigation-btn-border-radius: 5px;
$ax5grid-page-navigation-btn-bg: transparent;
$ax5grid-page-navigation-btn-font-size: 11px;
$ax5grid-page-navigation-btn-color: #fff;
$ax5grid-page-navigation-btn-hover-bg: #676767;
$ax5grid-page-navigation-btn-hover-color: #fff;

$ax5grid-page-status-font-size: 12px;
$ax5grid-page-status-padding: 10px;
$ax5grid-page-status-color: #222;

//== scroll
$ax5grid-scroll-track-border: 1px solid #676767;
$ax5grid-scroll-track-bg: #3a3c40;
$ax5grid-scroll-corner-bg: #676767;

$ax5grid-scroll-bar-border-radius: 10px;
$ax5grid-scroll-bar-border: 0px solid #fff;
$ax5grid-scroll-bar-bg: #676767;
$ax5grid-scroll-bar-hover-border: 0px solid #ccc;
$ax5grid-scroll-bar-hover-bg: #bababa;

//== body.row
$ax5grid-row-bg-0: #3a3c40;
$ax5grid-row-bg-1: #2A2A2A;
$ax5grid-row-bg-2: #3a3c40;
$ax5grid-row-bg-3: #2A2A2A;
$ax5grid-row-hover-bg: lighten(#3a3c40, 5%);
$ax5grid-row-grouping-bg: #ffffe7;
$ax5grid-row-selected: lighten(#3a3c40, 10%);

//== body.cell
$ax5grid-cell-padding-row-selector: 5px;
$ax5grid-cell-padding: 3px 5px;

$ax5grid-cell-checkbox-border: 1px solid #676767;
$ax5grid-cell-checkbox-border-radius: 3px;
$ax5grid-cell-checkbox-bg-colors: (#3a3c40, #2A2A2A);
$ax5grid-cell-checkbox-arrow-color: #BADC2D;

$ax5grid-cell-focused-box-shadow: inset 0px 0px 1px 1px #BADC2D;
$ax5grid-cell-focused-bg: lighten(#3a3c40, 15%);
$ax5grid-cell-focused-color: #fff;

$ax5grid-cell-selected-border-color: #676767;
$ax5grid-cell-selected-bg: lighten(#BADC2D, 15%);
$ax5grid-cell-selected-color: #000;

//== resizer
$ax5grid-resizer-color: #BADC2D;
$ax5grid-resizer-size: 2px;

@import "../../../plugins/ax5ui-grid/src/scss/ax5grid_variables";
@import "../../../plugins/ax5ui-grid/src/scss/ax5grid";



$ax5combobox-label-padding: 0px 3px;
$ax5combobox-label-bg-colors: (#000, #000);
$ax5combobox-label-border: 1px solid #676767;
$ax5combobox-label-color: #BADC2D;

$ax5combobox-option-group-bg: lighten(#2a2a2a, 5%);

$ax5combobox-default-base-color: $gray;
$ax5combobox-default-theme-color: #2a2a2a;
$ax5combobox-default-hover-type: darken, 20%;

@import "../../../plugins/ax5ui-combobox/src/scss/ax5combobox_variables";
@import "../../../plugins/ax5ui-combobox/src/scss/ax5combobox";

$ax5autocomplete-label-padding: 0px 3px;
$ax5autocomplete-label-bg-colors: (#000, #000);
$ax5autocomplete-label-border: 1px solid #676767;
$ax5autocomplete-label-color: #BADC2D;

$ax5autocomplete-option-group-bg: lighten(#2a2a2a, 5%);

$ax5autocomplete-default-base-color: $gray;
$ax5autocomplete-default-theme-color: #2a2a2a;
$ax5autocomplete-default-hover-type: darken, 20%;

@import "../../../plugins/ax5ui-autocomplete/src/scss/ax5autocomplete_variables";
@import "../../../plugins/ax5ui-autocomplete/src/scss/ax5autocomplete";

$ax5layout-splitter-background: #BADC2D;

$ax5layout-tab-panel-label-border-top: 1px solid $body-bg;
$ax5layout-tab-panel-label-border-bottom: 1px solid #676767;
$ax5layout-tab-panel-label-padding-top: 0px;
$ax5layout-tab-panel-label-height: 35px;
$ax5layout-tab-panel-label-item-height: 30px;
$ax5layout-tab-panel-label-bg-colors: ($body-bg, $body-bg);
$ax5layout-tab-panel-label-border-bg: #252525;
$ax5layout-tab-panel-label-item-color: $text-color;

$ax5layout-tab-panel-label-item-border-top: 1px solid #676767;
$ax5layout-tab-panel-label-item-border-right: 1px solid #676767;
$ax5layout-tab-panel-label-item-border-bottom: 1px solid #676767;
$ax5layout-tab-panel-label-item-bg-colors: (#616161, #616161);
$ax5layout-tab-panel-label-item-hover-bg-colors: (#3a3c40, #3a3c40);
$ax5layout-tab-panel-label-item-hover-color: $text-color;
$ax5layout-tab-panel-label-item-active-bg-colors: (#252525, #252525);
$ax5layout-tab-panel-label-item-active-color: $brand-info;

@import "../../../plugins/ax5ui-layout/src/scss/ax5layout_variables";
@import "../../../plugins/ax5ui-layout/src/scss/ax5layout";

[data-ax5layout] {
    > .split-panel-vertical[data-splitter] {
        z-index: auto;
        @include ax-background(left #737373 #5e5e5e);
        border: 1px solid #676767;
        border-radius: 3px;
    }
    > .split-panel-horizontal[data-splitter] {
        z-index: auto;
        @include ax-background(top #737373 #5e5e5e);
        border: 1px solid #676767;
        border-radius: 3px;
    }
}

.ax-mask.danger {
    .ax-mask-bg {
        background: #7a0000;
    }
}

.ax-mask.form-mask {
    .ax-mask-bg {
        background: #000;
        opacity: 0.3;
    }
    .ax-mask-content {
        color: $brand-success;
        text-shadow: none;
        font-size: 20px;
    }
}

.ax-mask.progress-mask {
    z-index: 1001;
    .ax-mask-bg {

    }
    .ax-mask-content {
        .progress {
            display: block;
            width: 250px;
            margin: 0 auto;
            display: block;
            height: 10px;
            border-radius: 5px;

            [role="progressbar"] {
                display: block;
                @include transition(all 10s $ease-out-sine);
            }
        }
    }
}