@charset "UTF-8";

/* Themes need more specific rules than Widgets etc. to make sure the values are applied no matter the import order */
:root:not(.b-nothing), :host(:not(.b-nothing)) {
    --b-primary                                  : var(--b-color-blue);
    --b-secondary                                : var(--b-color-orange);

    --b-mix                                      : #fff;
    --b-opposite                                 : #000;

    --b-elevation-1                              : 0 1px 3px 0 rgb(0 0 0 /0.08), 0 1px 1px 0 rgb(0 0 0 /0.06), 0 2px 1px -1px rgb(0 0 0 /0.04);
    --b-elevation-2                              : 0 1px 5px 0 rgb(0 0 0 /0.08), 0 2px 2px 0 rgb(0 0 0 /0.06), 0 3px 1px -2px rgb(0 0 0 /0.04);

    /* region Core */

    --b-widget-color-scheme                      : light;
    --b-widget-padding                           : .75em;
    --b-widget-padding-large                     : 1em;
    --b-widget-border-radius                     : .5em;
    --b-widget-border-radius-large               : 1em;
    --b-widget-border-color                      : var(--b-border-6);
    --b-widget-floating-box-shadow               : var(--b-elevation-1);
    --b-widget-floating-border                   : 1px solid var(--b-widget-border-color);
    --b-widget-anchor-offset                     : 0px;

    --b-avatar-border                            : 1px solid var(--b-widget-border-color);

    --b-button-height                            : 2.75em;
    --b-button-tonal-border-width                : 1px;
    --b-button-tonal-border-color                : var(--b-widget-border-color);
    --b-button-group-padded-pressed-border       : 1px solid var(--b-widget-border-color);
    --b-button-group-padded-pressed-box-shadow   : none;
    --b-button-group-padded-filled-pressed-color : var(--b-text-2);

    --b-checkbox-hover-border-color              : var(--b-border-5);

    --b-chip-view-chip-border-width              : 1px;
    --b-chip-view-chip-border-color              : var(--b-widget-border-color);

    --b-combo-outlined-chip-view-padding-top     : 0.4em;
    --b-combo-chip-view-padding                  : .4em var(--b-widget-padding);

    --b-field-set-border-color                   : var(--b-border-6);

    --b-label-font-size                          : .9em;
    --b-label-font-weight                        : 500;

    --b-list-multi-select-gap                    : 0.25em;
    --b-list-multi-select-item-padding           : 0.5em 0.75em;
    --b-list-item-border-radius                  : var(--b-widget-border-radius);

    --b-menu-item-border-radius                  : var(--b-widget-border-radius);
    --b-menu-item-padding                        : .6em 1em;
    --b-menu-padding                             : .5em;
    --b-menu-item-separator-height               : 9px;

    --b-panel-overlay-border                     : 1px solid var(--b-widget-border-color);
    --b-panel-top-toolbar-margin-inline          : var(--b-panel-padding);
    --b-panel-top-toolbar-border-radius          : var(--b-widget-border-radius);

    --b-popup-border                             : 1px solid var(--b-widget-border-color);

    --b-slide-toggle-border-color                : var(--b-widget-border-color);
    --b-slide-toggle-disabled-border-color       : transparent;
    --b-slide-toggle-height                      : 1.5em;
    --b-slide-toggle-width                       : 2.25em;
    --b-slide-toggle-thumb-border                : 1px solid var(--b-widget-border-color);
    --b-slide-toggle-disabled-opacity            : 0.4;

    --b-slider-track-color                       : var(--b-neutral-95);
    --b-slider-thumb-border                      : 1px solid var(--b-widget-border-color);
    --b-slider-thumb-elevation                   : null;
    --b-slider-track-border                      : 1px solid var(--b-widget-border-color);
    --b-slider-disabled-color                    : var(--b-neutral-95);
    --b-slider-disabled-thumb-color              : var(--b-neutral-95);
    --b-slider-disabled-track-color              : var(--b-neutral-97);

    --b-splitter-color                           : var(--b-neutral-65);
    --b-splitter-size                            : 1px;
    --b-splitter-hover-size                      : 5px;
    --b-splitter-hover-color                     : var(--b-neutral-90);

    --b-tab-bar-background                       : var(--b-neutral-97);
    --b-tab-bar-padding                          : var(--b-widget-padding);

    --b-tab-border                               : 1px solid transparent;
    --b-tab-active-border                        : 1px solid var(--b-widget-border-color);
    --b-tab-active-background                    : var(--b-neutral-100);
    --b-tab-border-radius                        : var(--b-widget-border-radius);
    --b-tab-indicator-display                    : none;

    --b-tooltip-rich-padding                     : 1em;

    --b-text-field-outlined-border-color         : var(--b-border-6);

    /* endregion */

    /* Grid */
    --b-grid-header-border-color                 : var(--b-widget-border-color);
    --b-grid-cell-border-color                   : var(--b-widget-border-color);
    --b-grid-row-border-color                    : var(--b-widget-border-color);

    --b-percent-column-bar-border                : 1px solid var(--b-grid-cell-border-color);
    --b-percent-column-bar-background            : transparent;
    --b-percent-column-bar-max-height            : 0.7em;

    --b-tree-indent-size                         : 1em;

    /* SchedulerPro */
    --b-task-editor-padding                      : 0;
    --b-form-tab-padding                         : 1em;

    /* Gantt */
    --b-scroll-button-border-width               : 1px;

    /* Calendar */
    --b-calendar-border-color                    : var(--b-widget-border-color);
    --b-sidebar-border-inline-end                : 1px solid var(--b-widget-border-color);
    --b-month-view-border-inline-width           : 0;
    --b-calendar-selected-date-border            : 1px solid var(--b-widget-border-color);

    /* TaskBoard */
    --b-task-board-card-border                   : 1px solid var(--b-widget-border-color);
    --b-task-board-column-header-font-size       : 1em;
    --b-task-board-column-header-font-weight     : var(--b-label-font-weight);

}

/* Shades of primary color have to be specified per widget, for color-mix to work as intended */
.b-bryntum:not(.b-nothing) {
    --bi-primary-shade                                : var(--b-primary-90);

    /* region Core */

    --b-button-outlined-pressed-background            : var(--b-primary-95);

    --b-button-group-padded-filled-pressed-background : var(--b-primary-90);

    --b-checkbox-checked-check-color                  : var(--b-primary-30);
    --b-checkbox-checked-background                   : var(--b-primary-95);
    --b-checkbox-checked-border-color                 : var(--b-widget-border-color);
    --b-checkbox-checked-hover-background             : var(--b-primary-95);

    --b-chip-view-chip-background                     : var(--b-primary-95);
    --b-chip-view-chip-hover-background               : var(--b-primary-92);
    --b-chip-view-chip-selected-background            : var(--b-primary-92);
    --b-chip-view-chip-active-background              : var(--b-primary-90);
    --b-chip-view-chip-active-selected-background     : var(--b-primary-85);

    --b-date-picker-selected-border                   : 1px solid var(--b-widget-border-color);

    --b-list-checkbox-checked-background              : var(--bi-primary-shade);
    --b-list-checkbox-checked-check-color             : var(--b-checkbox-checked-check-color);
    --b-list-checkbox-checked-border-color            : var(--b-checkbox-checked-border-color);
    --b-list-item-focus-background                    : var(--b-primary-92);

    --b-radio-checked-color                           : var(--b-primary-30);
    --b-radio-checked-background                      : var(--b-primary-95);
    --b-radio-checked-border-color                    : var(--b-widget-border-color);
    --b-radio-check-gap                               : 0.25em;

    --b-slide-toggle-background                       : var(--b-neutral-95);
    --b-slide-toggle-hover-background                 : var(--b-neutral-95);
    --b-slide-toggle-checked-hovered-thumb-background : var(--b-primary-35);
    --b-slide-toggle-checked-border-color             : var(--b-widget-border-color);
    --b-slide-toggle-checked-background               : var(--b-primary-95);
    --b-slide-toggle-checked-hover-background         : var(--b-primary-90);
    --b-slide-toggle-checked-thumb-background         : var(--b-primary-30);
    --b-slide-toggle-disabled-border-color            : var(--b-widget-border-color);

    --b-slider-color                                  : var(--bi-primary-shade);
    --b-slider-thumb-text-color                       : var(--b-neutral-30);

    --b-tab-hover-color                               : var(--b-neutral-20);
    --b-tab-hover-background                          : transparent;

    --b-text-field-focus-border-color                 : var(--b-primary-70);
    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);

    --b-toast-background                              : var(--b-neutral-100);

    /* endregion */

    /* Grid */

    --b-percent-column-fill-background                : var(--b-primary-70);
    --b-percent-column-value-color                    : var(--b-text-4);
}

/* Less vars target b-colorize compared to b-bryntum, making it cheaper to use for coloring many elements */
.b-colorize:not(.b-nothing) {
    /* Core */
    --b-avatar-background       : var(--b-primary-90);

    /* Grid */
    --b-group-header-color      : var(--b-tree-parent-color);
    --b-group-header-icon-color : var(--b-group-header-color);
}

/* Theme meta data */
.b-theme-info {
    --b-theme-name             : "VisbyLight";
    --b-theme-filename         : "visby-light";
    --b-theme-button-rendition : "outlined";
    --b-theme-label-position   : "align-before";
    --b-theme-overlap-label    : "false";
}