/* Variables Import
-------------------------------------------- */
@import url('text.css');
@import url('icons.css');
@import url('colors.css');


/* Padding
-------------------------------------------- */
:root {
    --padding-region-top:           16px;
    --padding-region-bottom:        16px;
    --padding-region-start:         16px;
    --padding-region-end:           16px;
    --padding-region:
        var(--padding-region-top)
        var(--padding-region-end)
        var(--padding-region-bottom)
        var(--padding-region-start);

    --padding-component-top:        24px;
    --padding-component-bottom:     24px;
    --padding-component-start:      24px;
    --padding-component-end:        24px;
    --padding-component:
        var(--padding-component-top)
        var(--padding-component-end)
        var(--padding-component-bottom)
        var(--padding-component-start);

    --padding-item-top:             clamp(4px, .65vh, 8px);
    --padding-item-bottom:          clamp(4px, .65vh, 8px);
    --padding-item-start:           clamp(4px, 1vw, 8px);
    --padding-item-start--indent:   24px;
    --padding-item-end:             clamp(4px, 1vw, 8px);
    --padding-item:
        var(--padding-item-top)
        var(--padding-item-end)
        var(--padding-item-bottom)
        var(--padding-item-start);

    --padding-input-top:            clamp(2px, 0.35vh, 4px);
    --padding-input-bottom:         clamp(2px, 0.35vh, 4px);
    --padding-input-start:          clamp(4px, 1vw, 8px);
    --padding-input-end:            clamp(4px, 1vw, 8px);
    --padding-input:
        var(--padding-input-top)
        var(--padding-input-end)
        var(--padding-input-bottom)
        var(--padding-input-start);
}


/* Gap
-------------------------------------------- */
:root {
    /* Gap */
    --gap-region-row:       clamp(16px, 2vh, 32px);
    --gap-region-column:    clamp(16px, 2vw, 32px);

    --gap-component-row:    clamp(24px, 3vh, 48px);
    --gap-component-column: clamp(24px, 3vw, 48px);

    --gap-item-row:         clamp(4px, 1vh, 8px);
    --gap-item-column:      clamp(4px, 1vw, 8px);

    --gap:                  clamp(4px, 1vw, 8px); /* Needs to be removed as it is not specified enough */
}


/* Border
-------------------------------------------- */
:root {
    --border-width:                 1px;
    --border-width-input:           var(--border-width);
    --border-width-input--hover:    var(--border-width);
    --border-width-input--focus:    var(--border-width);

    --border-style:                 solid;
    --border-style-input:           var(--border-style);
    --border-style-input--hover:    var(--border-style);
    --border-style-input--focus:    var(--border-style);

    --border-color:                 var(--border-normal);
    --border-color-input:           var(--border-light);
    --border-color-input--hover:    var(--border-dark);
    --border-color-input--focus:    transparent;

    --border-radius:                2px;
    --border-radius-input:          var(--border-radius);
}


/* Outline
-------------------------------------------- */
:root {
    --outline-width:    2px;
    --outline-style:    solid;
    --outline-color:    var(--accent);
    --outline:
        var(--outline-width)
        var(--outline-style)
        var(--outline-color);
    --outline-inset:    calc(0px - var(--outline-width));
    --outline-outset:   0;
}


/* Shadows
-------------------------------------------- */
:root {

    /* Length is the X and Y axes position of the supposedly light source */
    --shadow-length-x:      1;
    --shadow-length-y:      1;

    /* Distance is the Z axis of object casting the shadow on the background */
    --shadow-distance-1:    1;
    --shadow-distance-2:    2;
    --shadow-distance-3:    3;
    --shadow-distance-4:    4;
    --shadow-distance-5:    5;

    /* Shadow Color based on hsl values, by default black */
    --shadow-color-hsl:     0deg 0% 0%;

    /* Alpha is the transparency of the shadow, lower values correlates to more transparency */
    --shadow-alpha-1:        4%;
    --shadow-alpha-2:        7%;
    --shadow-alpha-3:       10%;
    --shadow-alpha-4:       12%;
    --shadow-alpha-5:       18%;
    --shadow-alpha-6:       20%;
    --shadow-alpha-7:       25%;
    --shadow-alpha-8:       30%;
    --shadow-alpha-9:       35%;

    /* Calculation of Length and Distance */
    --shadow-offset-x-1:    calc(( 1px * var(--shadow-length-x)) * var(--shadow-distance-1));
    --shadow-offset-y-1:    calc(( 1px * var(--shadow-length-y)) * var(--shadow-distance-1));
    --shadow-blur-1:        calc(( 1px * var(--shadow-distance-1)) * var(--shadow-distance-1));
    --shadow-spread-1:      calc(var(--shadow-blur-1) / 2 );

    --shadow-offset-x-2:    calc(( 1px * var(--shadow-length-x)) * var(--shadow-distance-2));
    --shadow-offset-y-2:    calc(( 1px * var(--shadow-length-y)) * var(--shadow-distance-2));
    --shadow-blur-2:        calc(( 1px * var(--shadow-distance-2)) * var(--shadow-distance-2));
    --shadow-spread-2:      calc(var(--shadow-blur-2) / 2);

    --shadow-offset-x-3:    calc(( 1px * var(--shadow-length-x)) * var(--shadow-distance-3));
    --shadow-offset-y-3:    calc(( 1px * var(--shadow-length-y)) * var(--shadow-distance-3));
    --shadow-blur-3:        calc(( 1px * var(--shadow-distance-3)) * var(--shadow-distance-3));
    --shadow-spread-3:      calc(var(--shadow-blur-3) / 2);

    --shadow-offset-x-4:    calc(( 1px * var(--shadow-length-x)) * var(--shadow-distance-4));
    --shadow-offset-y-4:    calc(( 1px * var(--shadow-length-y)) * var(--shadow-distance-4));
    --shadow-blur-4:        calc(( 1px * var(--shadow-distance-4)) * var(--shadow-distance-4));
    --shadow-spread-4:      calc(var(--shadow-blur-4) / 2);

    --shadow-offset-x-5:    calc(( 1px * var(--shadow-length-x)) * var(--shadow-distance-5));
    --shadow-offset-y-5:    calc(( 1px * var(--shadow-length-y)) * var(--shadow-distance-5));
    --shadow-blur-5:        calc(( 1px * var(--shadow-distance-5)) * var(--shadow-distance-5));
    --shadow-spread-5:      calc(var(--shadow-blur-5) / 2);

    /* Output Variables */
    --shadow-x0:            0 0 0 0;
    --shadow-x1:            var(--shadow-offset-x-1) var(--shadow-offset-y-1) var(--shadow-blur-1) var(--shadow-spread-1);
    --shadow-x2:            var(--shadow-offset-x-2) var(--shadow-offset-y-2) var(--shadow-blur-2) var(--shadow-spread-2);
    --shadow-x3:            var(--shadow-offset-x-3) var(--shadow-offset-y-3) var(--shadow-blur-3) var(--shadow-spread-3);
    --shadow-x4:            var(--shadow-offset-x-4) var(--shadow-offset-y-4) var(--shadow-blur-4) var(--shadow-spread-4);
    --shadow-x5:            var(--shadow-offset-x-5) var(--shadow-offset-y-5) var(--shadow-blur-5) var(--shadow-spread-5);

    --shadow-density-0:     hsl(var(--shadow-color-hsl)/ 0%);
    --shadow-density-1:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-1));
    --shadow-density-2:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-2));
    --shadow-density-3:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-3));
    --shadow-density-4:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-4));
    --shadow-density-5:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-5));
    --shadow-density-6:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-6));
    --shadow-density-7:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-7));
    --shadow-density-8:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-8));
    --shadow-density-9:     hsl(var(--shadow-color-hsl)/ var(--shadow-alpha-9));
}


/*-------------------------------------------- */
/*-------------------------------------------- */
/*-------------------------------------------- */


/* Components
-------------------------------------------- */

/* Action Panel */
.action-panels {
    --actionpanel-tab-strip-size:               32px;
    --actionpanel-tab-strip-gap:                2px;
    --actionpanel-tab-item-padding:             4px;
    --actionpanel-tab-item-border-width:        1px;
    --actionpanel-tab-item-border-style:        solid;
    --actionpanel-tab-item-border-radius:       var(--border-radius);
    --actionpanel-titlebar-padding:             var(--padding-item-top)
                                                var(--padding-item-end)
                                                var(--padding-item-bottom)
                                                var(--padding-item-start--indent);
    --actionpanel-search-padding:               var(--padding-region-top)
                                                var(--padding-region-end)
                                                var(--padding-region-bottom)
                                                var(--padding-region-start);
    --actionpanel-message-padding:              var(--padding-region-top)
                                                var(--padding-region-end)
                                                var(--padding-region-bottom)
                                                var(--padding-region-start);
    --actionpanel-message-count-border-radius:  4px;
    --actionpanel-message-count-offset:         2px;
    --actionpanel-message-count-padding:        2px 4px;
}


/* Button */
:is(.btn, .flat-button, .xIBLink, .xDialogButton) {
    --button-padding:                   6px 8px;
    --button-border-width:              0;
    --button-border-style:              var(--border-style);
    --button-border-radius:             2px;

    --button-primary-padding:           8px;
    --button-primary-border-width:      0px;
    --button-primary-border-style:      solid;
    --button-primary-border-radius:     2px;
    --button-secondary-padding:         8px;
    --button-secondary-border-width:    0px;
    --button-secondary-border-style:    solid;
    --button-secondary-border-radius:   2px;

    --button-primary-width-min:         78px;
    --button-secondary-width-min:       78px;

    --button-close-padding:             6px 8px;
    --button-close-border-width:        0;
    --button-close-border-style:        var(--border-style);
    --button-close-border-radius:       2px;
}


/* Calendar */
.xCal,
.xCalendar {
    --calendar-font-size:           12px;
    --calendar-border-style:        var(--border-style);
    --calendar-border-width:        var(--border-width);
    --calendar-shadow:              4px 4px 16px 4px rgba(0,0,0,.25);
    --calendar-date-today-outline:  var(--border-width--focus) inset var(--calendar-date-today-outline-color);
    --calendar-nav-height:          16px;
}


/* Category Bar */
.xCb,
.xCbFilter,
.xCbFilterResults {
	--categorybar-size:             192px;
	--categorybar-filter-height:    32px;
}

.xCb {
    --categorybar-border-width: 0 var(--border-width) 0 0;
    --categorybar-border-style: var(--border-style);
}

.xCbGrpHdr {
	--categorybar-groupheader-gap:          16px;
	--categorybar-groupheader-padding:      6px 4px 6px 8px;
    --categorybar-groupheader-height:       auto;
	--categorybar-groupheader-border-width: 0 0 2px 0;
	--categorybar-groupheader-border-style: var(--border-style);
}

.xCbGrpHdr ~ .xCbBtns {
	--categorybar-groupheader-button-padding:       4px 4px 4px 16px;
	--categorybar-groupheader-button-border-width:  0;
	--categorybar-groupheader-button-border-style:  solid;
}

.xCbBtns {
	--categorybar-button-padding:           4px 8px;
    --categorybar-button-height:            auto;
	--categorybar-button-border-width:      0;
	--categorybar-button-border-style:      var(--border-style);
    --categorybar-button-shadow:            var(--shadow-x0) var(--shadow-density-0);
    --categorybar-button-shadow--hover:     var(--shadow-x0) var(--shadow-density-0);
    --categorybar-button-shadow--active:    var(--shadow-x0) var(--shadow-density-0);
}

.xCbFilter {
    --categorybar-filter-width:                     var(--categorybar-size);
    --categorybar-filter-margin:                    0;
	--categorybar-filter-padding:                   0;
	--categorybar-filter-border-width:              0 var(--border-width) var(--border-width) 0;
	--categorybar-filter-border-style:              var(--border-style);
    --categorybar-filter-input-padding:             0 8px;
    --categorybar-filter-input-border-width:        var(--border-width-input);
    --categorybar-filter-input-border-width--hover: var(--border-width-input--hover);
    --categorybar-filter-input-border-width--focus: var(--border-width-input--focus);
    --categorybar-filter-input-border-style:        var(--border-style-input);
    --categorybar-filter-input-border-style--hover: var(--border-style-input--hover);
    --categorybar-filter-input-border-style--focus: var(--border-style-input--focus);
    --categorybar-filter-input-border-radius:       var(--border-radius-input);
}

.xCbFilterResults {
	--categorybar-filter-results-offset-x:      calc(var(--categorybar-filter-height) - 4px );
	--categorybar-filter-results-offset-Y:      4px;
    --categorybar-filter-results-padding:       4px 8px;
	--categorybar-filter-results-border-width:  1px;
	--categorybar-filter-results-border-style:  solid;
	--categorybar-filter-results-border-radius: var(--border-radius);
	--categorybar-filter-results-shadow:        var(--shadow-x1) var(--shadow-density-3);
}


/* Checkbox */
input[type="checkbox"],
.xSelBox,
.xFilterHdr {
    --checkbox-margin:                          0px;
    --checkbox-padding-top:                     0px;
    --checkbox-padding-bottom:                  0px;
    --checkbox-padding-start:                   0px;
    --checkbox-padding-end:                     0px;
    --checkbox-padding:                         var(--checkbox-padding-top)
                                                var(--checkbox-padding-end)
                                                var(--checkbox-padding-bottom)
                                                var(--checkbox-padding-start);
    --checkbox-icon-size:                       18px;
    --checkbox-icon-border-radius:              2px;

    --checkbox-toggle-width:                    calc(var(--checkbox-icon-size) * 1.5 );
    --checkbox-toggle-height:                   var(--checkbox-icon-size);
    --checkbox-toggle-border-width:             2px;
    --checkbox-toggle-border-style:             solid;
    --checkbox-toggle-border-radius:            calc(var(--checkbox-toggle-height) / 2);

    --checkbox-toggle-checkmark-gap:            2px;
    --checkbox-toggle-checkmark-border-radius:  100%;
    --checkbox-toggle-checkmark-width:          calc(var(--checkbox-toggle-height) - (var(--checkbox-toggle-border-width) * 2) - (var( --checkbox-toggle-checkmark-gap) * 2));
    --checkbox-toggle-checkmark-height:         calc(var(--checkbox-toggle-height) - (var(--checkbox-toggle-border-width) * 2) - (var( --checkbox-toggle-checkmark-gap) * 2));
}


/* Combobox */
.xComboBox {
    --combobox-min-width:                   128px;
    --combobox-max-width:                   256px;
    --combobox-padding:                     var(--padding-input-top)
                                            calc(var(--padding-input-end) + var(--icon-font-size))
                                            var(--padding-input-bottom)
                                            var(--padding-input-start);
    --combobox-border-width:                var(--border-width-input);
    --combobox-border-width--hover:         var(--border-width-input--hover);
    --combobox-border-width--focus:         var(--border-width-input--focus);
    --combobox-border-style:                var(--border-style-input);
    --combobox-border-style--hover:         var(--border-style-input--hover);
    --combobox-border-style--focus:         var(--border-style-input--focus);
    --combobox-border-radius:               var(--border-radius-input);
    --combobox-icon-transform:              translateX(calc(0px - (var(--icon-font-size) + var(--padding-input-end))));
}

.xCombo {
    --combobox-dropdown-min-width:          128px;
    --combobox-dropdown-padding:            0;
    --combobox-dropdown-gap:                0;
    --combobox-dropdown-border-width:       var(--border-width);
    --combobox-dropdown-border-style:       var(--border-style);
    --combobox-dropdown-border-radius:      var(--border-radius);
    --combobox-dropdown-box-shadow:         var(--shadow-x4) var(--shadow-density-5);
    --combobox-dropdown-item-padding:       var(--padding-item);
    --combobox-dropdown-item-gap:           var(--gap-item-column);
}


/* Config */
.xConfigLink {
    --config-link-padding: var(--padding);
}


/* Dialog */
.xDialogPopup {
    --dialog-popup-min-height:      128px;
    --dialog-popup-border-width:    var(--border-width);
    --dialog-popup-border-style:    var(--border-style);
    --dialog-popup-border-radius:   var(--border-radius);
    --dialog-popup-shadow:          var(--shadow-x4) var(--shadow-density-5);
}

.xDialogPopup .xMsgContainer {
    --dialog-popup-message-padding:         var(--padding-component);
    --dialog-popup-message-gap:             32px;
    --dialog-popup-message-paragraph-gap:   16px;
}

.xDialogIFrame {
    --dialog-iframe-width:          90vw;
    --dialog-iframe-height:         90vh;
    --dialog-iframe-padding:        0;
    --dialog-iframe-border-width:   var(--border-width);
    --dialog-iframe-border-style:   var(--border-style);
    --dialog-iframe-border-radius:  var(--border-radius);
    --dialog-iframe-shadow:         var(--shadow-x4) var(--shadow-density-5);
}

#pnlAllMsgs {
    --dialog-iframe-messages-padding:   16px;
    --dialog-iframe-messages-gap:       16px;
}

.xDialogTitlebar {
    --dialog-titlebar-padding:      4px 4px 4px 8px;
    --dialog-titlebar-border-width: 0;
    --dialog-titlebar-border-style: var(--border-style);
}

.xTransition {
    --dialog-transition-min-height:             160px;
    --dialog-transition-title-text-transform:   normal;
}


/* Lookup */
body:not(.xQVDialog) > .xCfg {
    --lookup-preview-width: minmax(256px, 20%);
}

.xSelBox, .xFilterHdr {
    --lookup-table-selectionbox-size: calc(var(--checkbox-icon-size) + (var(--checkbox-margin) * 2));
}

.xLookupBody {
    --lookup-table-header-padding:              4px;
    --lookup-table-header-icon-gap:             8px;
    --lookup-table-header-border-width:         var(--border-width);
    --lookup-table-header-border-style:         var(--border-style);
    --lookup-table-header-filter-padding:       0 4px 4px;
    --lookup-table-selectionbox-padding-sides:  4px;
    --lookup-table-row-border-width:            0 0 var(--border-width) 0;
    --lookup-table-row-border-style:            var(--border-style);
    --lookup-table-cell-padding:                4px;
}

.xLookupPreview {
    --lookup-preview-padding:           4px 8px;
    --lookup-preview-border-width:      0 0 0 var(--border-width);
    --lookup-preview-border-style:      var(--border-style);
    --lookup-preview-header-padding:    0 0 8px 0;
    --lookup-preview-item-gap:          8px;
    --lookup-preview-icon-gap:          4px;
    --lookup-preview-item-input-gap:    4px;
    --lookup-preview-item-input-wdith:  40px;

}

.xLookupTb {
    --lookup-toolbar-padding:       4px 8px;
    --lookup-toolbar-border-width:  var(--border-width) 0 0 0;
    --lookup-toolbar-border-style:  var(--border-style);
}

.xLookupQuickBar {
    --lookup-quickbar-height:       32px;
    --lookup-quickbar-border-width: var(--border-width) 0 0 0;
    --lookup-quickbar-border-style: var(--border-style);
}


/* Info Bar */
.xIB,
.infoBar {
    --infobar-padding:          var(--padding-component);
    --infobar-border-style:     var(--border-style);
    --inforbar-border-width:    var(--border-width);
}


/* Notice */
.xPageNotice {
    --notice-border-style:  var(--border-style);
    --notice-border-width:  var(--border-width);
    --notice-gap:           8px;
    --notice-padding:       var(--padding-component);
}


/* Option Block */
.xOB,
.xOBDis,
.xOBErr {
    --optionblock-padding:          0;
    --optionblock-border-width:     0;
    --optionblock-border-style:     var(--border-style);
    --optionblock-border-radius:    var(--border-radius);
    --optionblock-shadow:           0;
    --optionblock-disabled-opacity: 25%;
    --optionblock-image-gap:        16px;
    --optionblock-gap-column:       var(--gap-item-column);
    --optionblock-gap-row:          calc(var(--gap-item-row) * 2);
}


/* Property */
.xP {
    --property-gap:             4px;
    --property-label-gap:       4px;
    --property-padding:         0;
    --property-border-width:    0;
    --property-border-style:    var(--border-style);
    --property-border-radius:   var(--border-radius);
    --property-shadow:          0;
}


/* Property Grid */
.xPG {
    --propertygrid-gap-row:         var(--gap-component-row);
    --propertygrid-gap-column:      var(--gap-component-column);
    --propertygrid-border-width:    0;
    --propertygrid-border-style:    var(--border-style);
    --propertygrid-border-radius:   var(--border-radius);
    --propertygrid-shadow:          0;
}


/* Quick Action Bar */
.xQAB,
.xQABBtns
.xQABButton,
.xQABButtonWithImage,
.xQABButtonWithImageDisabled {
    --quick-actionbar-justification:    flex-start;
    --quick-actionbar-alignment:        center;
    --quick-actionbar-padding:          16px;
    --quick-actionbar-button-spacing:   36px;
}


/* Quick View */
.xQV {
    --quickview-body-padding:   8px;
    --quickview-margin-bottom:  calc(var(--base-font-size) * 3);
}

.xQV .modelHeader {
    --quickview-header-padding: 8px 0;
}

.xQV .cat {
    --quickview-category-padding: 16px 0 8px 0;
}

.xQV .opt {
    --quickview-option-indent:              8px;
    --quickview-option-padding:             2px 8px;
    --quickview-option-value-column-width:  10%;
}

.xQV .props-section {
    --quickview-properties-indent:              16px;
    --quickview-properties-margin-bottom:       8px;
    --quickview-properties-padding:             4px;
    --quickview-properties-border-width:        var(--border-width);
    --quickview-properties-border-style:        var(--border-style);
    --quickview-properties-border-radius:       var(--border-radius);
    --quickview-properties-value-column-width:  65%;
}

.xQV .total {
    --quickview-properties-total-padding:       8px;
    --quickview-properties-total-border-width:  var(--border-width) 0 0 0;
    --quickview-properties-total-border-style:  var(--border-style);
}


/* Radio Button */
input[type="radio"] {
    --radio-padding-top:                0px;
    --radio-padding-bottom:             0px;
    --radio-padding-start:              0px;
    --radio-padding-end:                0px;
    --radio-padding:                    var(--radio-padding-top)
                                        var(--radio-padding-end)
                                        var(--radio-padding-bottom)
                                        var(--radio-padding-start);
    --radio-icon-size:                  18px;
    --radio-icon-radiobutton:           var(--icon-radio-button);
    --radio-icon-radiobutton--focus:    var(--icon-radio-button--focus);
    --radio-icon-radiobutton--checked:  var(--icon-radio-button--checked);
    --radio-icon-border-radius:         100%;
}


/* Region */
.viewRgn {
    --region-view-padding:      var(--padding-region-top)
                                var(--padding-region-end)
                                var(--padding-region-bottom)
                                var(--padding-region-start);
    --region-view-gap-row:      var(--gap-region-row);
    --region-inner-padding:     var(--padding-component-top)
                                var(--padding-component-end)
                                var(--padding-component-bottom)
                                var(--padding-component-start);
    --region-inner-gap-row:     var(--gap-component-row);
    --region-inner-gap-column:  var(--gap-component-column);
}

.xRgn {
    --region-border-width:  var(--border-width);
    --region-border-style:  var(--border-style);
    --region-border-radius: var(--border-radius);
    --region-shadow:        var(--shadow-x2) var(--shadow-density-3);
}

.xRgnHdr,
.xSubHdr {
    --region-header-padding:    var(--padding-item-top)
                                var(--padding-item-end)
                                var(--padding-item-bottom)
                                var(--padding-item-start--indent);
}

.xRgnHdrBtns {
    --region-header-button-gap-column:  var(--gap-item-column);
    --region-header-button-padding:     var(--padding-item-top)
                                        var(--padding-item-end)
                                        var(--padding-item-bottom)
                                        var(--padding-item-start);
    --region-header-button-icon-size:   var(--icon-font-size);
}

.xRgnHdrBtns a#help {
    --region-header-button-help-border-width:   0;
    --region-header-button-help-border-style:   var(--border-style);
    --region-header-button-help-border-radius:  var(--border-radius);
}

.xRgnHdrBtns a#hs {
    --region-header-button-hs-border-width:     0;
    --region-header-button-hs-border-style:     var(--border-style);
    --region-header-button-hs-border-radius:    var(--border-radius);
}

.xRgnTb {
    --region-toolbar-padding:       var(--padding-item-top)
                                    var(--padding-item-end)
                                    var(--padding-item-bottom)
                                    var(--padding-item-start--indent);
    --region-toolbar-border-width:  0 0 var(--border-width) 0;
    --region-toolbar-border-style:  var(--border-style);
}


/* Search Box */
.search-box,
.xSearchBox,
.xSearchBoxDropDown {
    --searchbox-input-padding:              var(--padding-input-top)
                                            var(--padding-input-end)
                                            var(--padding-input-bottom)
                                            var(--searchbox-icon-width);
    --searchbox-input-border-width:         var(--border-width-input);
    --searchbox-input-border-width--hover:  var(--border-width-input--hover);
    --searchbox-input-border-width--focus:  var(--border-width-input--focus);
    --searchbox-input-border-style:         var(--border-style-input);
    --searchbox-input-border-style--hover:  var(--border-style-input--hover);
    --searchbox-input-border-style--focus:  var(--border-style-input--focus);
    --searchbox-input-border-radius:        var(--border-radius-input);

    --searchbox-dropdown-border-width:      0 var(--border-width) var(--border-width) var(--border-width);
    --searchbox-dropdown-border-style:      var(--border-style);
    --searchbox-searching-padding:          var(--padding);
    --searchbox-width:                      clamp(160px, 25vw, 50%);
}


/* Setting */
.xStg {
    --setting-border-style:     var(--border-style);
    --setting-border-width:     0 0 0 0;
    --setting-shadow:           .4px 4px 16px 4px rgba(0,0,0,.25);
    --setting-input-width:      256px;
    --setting-controls-padding: 40px;
}


/* Spinner */
.spinner {
    --spinner-size:     90px;
    --spinner-width:    12px;
    --spinner-speed:    1.5s;
    --spinner-opacity:  0.85;
    --spinner-margin:   -15px auto auto -15px;
}


/* Splitter */
.xHSplit,
.xVSplit,
.xVSplit::before,
.xHSplit::before {
    --splitter-size:            8px;
    --splitter-border-width:    1px;
    --splitter-border-style:    solid;
}


/* Status Bar */
.xSb {
    --statusbar-padding:        var(--padding);
    --statusbar-border-width:   var(--border-width) 0 0 0;
    --statusbar-border-style:   var(--border-style);
}


/* Text */
input[type="text"] {
    --input-text-padding:               var(--padding-input);
    --input-text-border-width:          var(--border-width-input);
    --input-text-border-width--hover:   var(--border-width-input--hover);
    --input-text-border-width--focus:   var(--border-width-input--focus);
    --input-text-border-style:          var(--border-style-input);
    --input-text-border-style--hover:   var(--border-style-input--hover);
    --input-text-border-style--focus:   var(--border-style-input--focus);
    --input-text-border-radius:         var(--border-radius-input);
}


/* Textarea */
textarea {
    --textarea-padding:             var(--padding-input);
    --textarea-border-width:        var(--border-width-input);
    --textarea-border-width--hover: var(--border-width-input--hover);
    --textarea-border-width--focus: var(--border-width-input--focus);
    --textarea-border-style:        var(--border-style-input);
    --textarea-border-style--hover: var(--border-style-input--hover);
    --textarea-border-style--focus: var(--border-style-input--focus);
    --textarea-border-radius:       var(--border-radius-input);
}


/* Tool Bar */
:root {
    --toolbar-height: 64px;
}

.xTb,
.xTbMask {
    --toolbar-border-width:             0 0 var(--border-width) 0;
    --toolbar-border-style:             var(--border-style);
    --toolbar-padding:                  0px 8px;
    --toolbar-gap:                      var(--gap);
    --toolbar-shadow:                   0px 0px 4px 0px rgb(0 0 0 / 20%), 0px 0px 2px 0px rgb(0 0 0 / 15%);
    --toolbar-branding-logo-height:     36px;
    --toolbar-branding-logo-padding:    0 0;
    --toolbar-text-margin:              0;
    --toolbar-text-padding:             2px 0;
    --toolbar-text-justification:       flex-end;
}

.xTbBtns {
    --toolbar-buttonbar-margin:                         0;
    --toolbar-buttonbar-padding:                        0;
    --toolbar-buttonbar-button-gap:                     4px;
    --toolbar-button-width:                             auto;
    --toolbar-button-height:                            auto;
    --toolbar-button-padding:                           4px;
    --toolbar-button-gap:                               0;
    --toolbar-button-min-width:                         calc(var(--toolbar-button-font-size) + (10px * 2));
    --toolbar-button-border-width:                      0 0 0 0;
    --toolbar-button-border-width--hover:               0 0 0 0;
    --toolbar-button-border-width--selected:            0 0 0 0;
    --toolbar-button-border-width--selected--hover:     0 0 0 0;
    --toolbar-button-border-style:                      var(--border-style);
    --toolbar-button-border-style--hover:               var(--border-style);
    --toolbar-button-border-style--selected:            var(--border-style);
    --toolbar-button-border-style--selected--hover:     var(--border-style);
    --toolbar-button-border-radius:                     var(--border-radius);
    --toolbar-button-border-radius--hover:              var(--border-radius);
    --toolbar-button-border-radius--selected:           var(--border-radius);
    --toolbar-button-border-radius--selected--hover:    var(--border-radius);
}

.xMainCfg > .xTb .xTbBtns > a {
    --toolbar-button-padding: 0.625rem .75rem;
}


/* Splitter */
.xTooltip {
    --tooltip-padding: 8px;
}