@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-ripple-background                                     : #00000010;
    --b-ripple-blend-mode                                     : soft-light;

    /* region Core */

    --b-widget-color-scheme                                   : light;
    --b-widget-border-radius                                  : 0.35em;
    --b-widget-border-radius-large                            : 1.5em;

    --b-button-border-radius                                  : 3em;
    --b-button-filled-hover-box-shadow                        : var(--b-elevation-1);
    --b-button-outlined-border-color                          : var(--b-border-5);
    --b-button-outlined-hover-border-color                    : var(--b-border-4);
    --b-button-tonal-hover-box-shadow                         : var(--b-elevation-1);
    --b-button-padding                                        : 0 calc(var(--b-button-height) * 0.6);
    --b-button-icon-padding                                   : 0 calc(var(--b-button-height) * 0.6) 0 calc(var(--b-button-height) * 0.4);
    --b-button-end-icon-padding                               : 0 calc(var(--b-button-height) * 0.4) 0 calc(var(--b-button-height) * 0.6);
    --b-button-rotate-padding                                 : calc(var(--b-button-height) * 0.6) 0;
    --b-button-gap                                            : calc(var(--b-button-height) * 0.2);

    --b-checkbox-border-color                                 : var(--b-neutral-35);
    --b-checkbox-border-width                                 : 2px;
    --b-checkbox-check-font-size                              : 1em;
    --b-checkbox-hover-background                             : transparent;
    --b-checkbox-hover-border-color                           : var(--b-border-2);
    --b-checkbox-focus-outline-width                          : 0;
    --b-checkbox-ring-hover-opacity                           : 0.1;
    --b-checkbox-ring-focus-opacity                           : 0.2;
    --b-checkbox-ring-active-opacity                          : 0.3;
    --b-checkbox-ring-content                                 : '';
    --b-checkbox-inner-gap                                    : 1em;

    --b-field-set-label-font-size                             : 0.7em;

    --b-panel-with-header-padding                             : 0 1.5em 1.5em 1.5em;
    --b-panel-header-font-size                                : 1.4em;
    --b-panel-bottom-toolbar-padding                          : calc(var(--b-panel-padding) / 2) var(--b-panel-padding) var(--b-panel-padding) var(--b-panel-padding);
    --b-panel-top-toolbar-margin-inline                       : var(--b-panel-padding);
    --b-panel-top-toolbar-border-radius                       : 100em;

    --b-popup-border-radius                                   : var(--b-widget-border-radius-large);

    --b-radio-group-gap                                       : 0;

    --b-slide-toggle-border-color                             : var(--b-border-3);
    --b-slide-toggle-thumb-background                         : var(--b-neutral-50);
    --b-slide-toggle-thumb-size                               : .9em;
    --b-slide-toggle-checked-thumb-size                       : 1.25em;
    --b-slide-toggle-hovered-thumb-background                 : var(--b-neutral-30);
    --b-slide-toggle-disabled-border-color                    : var(--b-neutral-80);

    --b-slider-ring-content                                   : '';

    --b-splitter-size                                         : 1px;
    --b-splitter-hover-size                                   : 5px;

    --b-tab-label-position                                    : relative;
    --b-tab-indicator-border-radius                           : var(--b-widget-border-radius) var(--b-widget-border-radius) 0 0;
    --b-tab-indicator-height                                  : .25em;
    --b-tab-color                                             : var(--b-neutral-20);

    --b-toolbar-background                                    : var(--b-neutral-97);

    --b-tooltip-plain-font-size                               : 0.8em;
    --b-tooltip-rich-border-radius                            : 1em;

    /* region TextField */

    --b-field-trigger-color                                   : var(--b-neutral-30);

    --b-text-field-label-scale                                : 0.7;
    --b-text-field-label-above-grid-area                      : inner;
    --b-text-field-label-grid-area                            : inner;
    --b-text-field-focus-border-width                         : 2px;
    --b-text-field-default-template-areas                     : "inner";
    --b-text-field-default-template-columns                   : 1fr;
    /* --b-text-field-border-color                               : var(--b-border-3); */

    --b-text-field-filled-border-width                        : 0 0 1px 0;
    --b-text-field-filled-focus-border-width                  : 0 0 2px 0;
    --b-text-field-filled-border-radius                       : var(--b-widget-border-radius) var(--b-widget-border-radius) 0 0;
    --b-text-field-filled-input-padding                       : 1.25em 1em 0.5em 1em;
    --b-text-field-filled-no-label-input-padding              : 1em;

    --b-text-field-outlined-focus-border-width                : 2px;
    --b-text-field-outlined-label-padding                     : 0 0.5em;
    --b-text-field-outlined-label-before-padding              : 0 1em 0 0;
    --b-text-field-outlined-label-above-padding               : 0 0.5em;
    --b-text-field-outlined-background                        : transparent;
    --b-text-field-outlined-hover-background                  : transparent;
    --b-text-field-outlined-focus-background                  : transparent;
    --b-text-field-outlined-hover-border-color                : var(--b-border-1);

    /* Material specific vars */
    --b-text-field-label-above-placeholder-color              : transparent;

    --b-text-field-filled-material-label-position             : absolute;
    --b-text-field-filled-material-label-top                  : 0.5em;
    --b-text-field-filled-material-label-left                 : 1em;
    --b-text-field-filled-material-label-cursor               : text;
    --b-text-field-filled-material-empty-label-top            : calc(50% - 0.5em); /*1.25em;*/
    --b-text-field-filled-material-empty-label-left           : 1em;
    --b-text-field-filled-material-trigger-label-left         : 3em;
    --b-text-field-filled-material-trigger-empty-label-left   : 3em;

    --b-text-field-outlined-material-label-position           : absolute;
    --b-text-field-outlined-material-label-top                : -0.35em;
    --b-text-field-outlined-material-label-left               : .5em; /* As empty, -padding */
    --b-text-field-outlined-material-label-cursor             : text;
    --b-text-field-outlined-material-empty-label-background   : transparent;
    --b-text-field-outlined-material-empty-label-padding      : 0em;
    --b-text-field-outlined-material-empty-label-top          : calc(50% - 0.5em); /*1.2em;*/
    --b-text-field-outlined-material-empty-label-left         : 1em;
    --b-text-field-outlined-material-trigger-empty-label-left : 3em;

    /* endregion */

    --b-tooltip-plain-color                                   : var(--b-neutral-100);

    /* endregion */

    /* Chart */

    --b-chart-designer-labels-list-padding-block              : 0;
}

/* 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-40);

    /* region Core */

    --b-button-outlined-pressed-background            : var(--b-primary-85);
    --b-button-outlined-color                         : var(--bi-primary-shade);

    --b-button-type-text-focused-background           : var(--b-primary-90);
    --b-button-type-text-pressed-background           : var(--b-primary-85);
    --b-button-type-text-color                        : var(--b-primary-40);

    --b-checkbox-checked-background                   : var(--b-primary-45);
    --b-checkbox-checked-border-color                 : var(--b-checkbox-checked-background);
    --b-checkbox-checked-hover-background             : var(--bi-primary-shade);
    --b-checkbox-focus-outline-color                  : null;

    --b-chip-view-chip-color                          : var(--b-primary-30);

    --b-field-error-tip-color                         : var(--b-neutral-100);
    --b-field-error-tip-background                    : var(--b-primary-25);

    --b-list-background                               : var(--b-primary-100);
    --b-list-floating-background                      : var(--b-primary-100);
    --b-list-checkbox-checked-background              : var(--b-primary-45);

    --b-menu-background                               : var(--b-primary-99);
    --b-menu-item-focus-background                    : var(--b-primary-85);
    --b-menu-item-hover-color                         : var(--b-primary-30);
    --b-menu-item-hover-icon-color                    : var(--b-primary-30);

    --b-panel-top-toolbar-button-type-text-color      : var(--b-primary-20);

    --b-popup-background                              : var(--b-primary-99);

    --b-slider-track-color                            : var(--b-primary-90);
    --b-slider-thumb-focus-outline-color              : transparent;

    --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-95);

    --b-tab-active-tab-color                          : var(--b-primary-50);

    --b-tooltip-plain-background                      : var(--b-primary-25);
    --b-tooltip-rich-background                       : var(--b-primary-98);

    --b-text-field-focus-border-color                 : var(--bi-primary-shade);
    --b-text-field-outlined-focus-label-color         : var(--bi-primary-shade);
    --b-text-field-outlined-label-background          : var(--b-parent-background-color, var(--b-neutral-100));
    --b-text-field-filled-focus-label-color           : var(--bi-primary-shade);
    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);

    /* endregion */
}

/* Theme meta data */
.b-theme-info {
    --b-theme-name             : "Material3Light";
    --b-theme-filename         : "material3-light";
    --b-theme-button-rendition : "tonal";
    --b-theme-label-position   : "above";
    --b-theme-overlap-label    : "true";
    --b-theme-ripple           : "true";
}