@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;

    /* region Core */

    --b-widget-color-scheme                   : light;
    --b-widget-border-radius                  : 0.35em;
    --b-widget-border-radius-large            : 1em;
    --b-widget-border-color                   : var(--b-neutral-60);

    --b-button-font-weight                    : 400;

    --b-button-group-padded-background        : var(--b-neutral-90);

    --b-checkbox-background                   : var(--b-primary-100);
    --b-checkbox-hover-background             : var(--b-primary-100);
    --b-checkbox-checked-background           : var(--b-neutral-100);
    --b-checkbox-checked-hover-background     : var(--b-neutral-100);

    --b-panel-background                      : var(--b-neutral-98);

    --b-popup-background                      : var(--b-panel-background);
    --b-popup-padding                         : var(--b-widget-padding);

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

    --b-splitter-color                        : var(--b-border-7);

    --b-text-field-focus-border-width         : 2px;
    /* --b-text-field-border-color                  : var(--b-border-3); */

    --b-text-field-outlined-input-padding     : .9em;
    --b-field-trigger-edge-gap                : .9em;

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

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

    /* endregion */

    /* Grid */
    --b-grid-header-background                : var(--b-neutral-97);
    --b-grid-header-font-weight               : 400;
    --b-grid-footer-background                : var(--b-grid-header-background);
    --b-grid-cell-border-color                : var(--b-neutral-85);
    --b-grid-toolbar-background               : var(--b-grid-header-background);
    --b-grid-panel-header-border-bottom       : none;
    --b-stripe-odd-color                      : var(--b-neutral-97);
    --b-group-header-background               : var(--b-neutral-98);
    --b-grid-header-icon-color                : var(--b-neutral-50);
}

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

    /* region Core */

    --b-button-tonal-background                       : var(--b-primary-92);

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

    --b-checkbox-checked-check-color                  : var(--b-primary-20);

    --b-list-checkbox-checked-background              : var(--b-primary-95);
    --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-menu-background                               : var(--b-primary-100);

    --b-radio-checked-color                           : var(--b-primary-20);
    --b-radio-checked-background                      : var(--b-primary-95);
    --b-radio-checked-border-color                    : var(--b-widget-border-color);

    --b-slide-toggle-background                       : var(--b-primary-97);
    --b-slide-toggle-hover-background                 : var(--b-primary-97);
    --b-slide-toggle-checked-hovered-thumb-background : var(--b-primary-95);
    --b-slide-toggle-checked-border-color             : var(--b-widget-border-color);
    --b-slide-toggle-checked-background               : var(--b-primary-65);
    --b-slide-toggle-checked-hover-background         : var(--b-primary-65);

    --b-slider-color                                  : var(--b-primary-65);

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

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

    --b-panel-header-background                       : var(--b-primary-90);
    --b-panel-header-color                            : var(--b-primary-30);

    /* endregion */

    /* Grid */
    --b-grid-cell-hover-background                    : var(--b-primary-96);
    --b-grid-cell-selected-background                 : var(--b-primary-94);
    --b-grid-cell-hover-selected-background           : var(--b-primary-92);
}

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