@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-elevation-1                           : 0 1px 3px 0 rgb(0 0 0 /0.22), 0 1px 1px 0 rgb(0 0 0 /0.20), 0 2px 1px -1px rgb(0 0 0 /0.18);
    --b-elevation-2                           : 0 1px 5px 0 rgb(0 0 0 /0.22), 0 2px 2px 0 rgb(0 0 0 /0.20), 0 3px 1px -2px rgb(0 0 0 /0.18);

    /* region Neutral shades */
    --b-neutral-100                           : hsl(0 0 13%);
    --b-neutral-99                            : hsl(0 0 14%);
    --b-neutral-98                            : hsl(0 0 15%);
    --b-neutral-97                            : hsl(0 0 16%);
    --b-neutral-96                            : hsl(0 0 17%);
    --b-neutral-95                            : hsl(0 0 18%);
    --b-neutral-94                            : hsl(0 0 19%);
    --b-neutral-93                            : hsl(0 0 20%);
    --b-neutral-92                            : hsl(0 0 21%);
    --b-neutral-91                            : hsl(0 0 22%);
    --b-neutral-90                            : hsl(0 0 23%);
    --b-neutral-85                            : hsl(0 0 28%);
    --b-neutral-80                            : hsl(0 0 33%);
    --b-neutral-75                            : hsl(0 0 38%);
    --b-neutral-70                            : hsl(0 0 43%);
    --b-neutral-65                            : hsl(0 0 48%);
    --b-neutral-60                            : hsl(0 0 53%);
    --b-neutral-55                            : hsl(0 0 58%);
    --b-neutral-50                            : hsl(0 0 63%);
    --b-neutral-45                            : hsl(0 0 68%);
    --b-neutral-40                            : hsl(0 0 73%);
    --b-neutral-35                            : hsl(0 0 78%);
    --b-neutral-30                            : hsl(0 0 83%);
    --b-neutral-25                            : hsl(0 0 88%);
    --b-neutral-20                            : hsl(0 0 93%);
    --b-neutral-15                            : hsl(0 0 95%);
    --b-neutral-10                            : hsl(0 0 97%);
    --b-neutral-5                             : hsl(0 0 98%);
    --b-neutral-2                             : hsl(0 0 99%);
    --b-neutral-1                             : hsl(0 0 99.5%);
    --b-neutral-0                             : hsl(0 0 100%);
    /* endregion */

    --b-mix                                   : hsl(0 0 13%);
    --b-opposite                              : #fff;

    /* region Core */
    --b-widget-color-scheme                   : dark;
    --b-widget-border-radius                  : 0.35em;
    --b-widget-border-color                   : var(--b-neutral-60);
    --b-widget-color                          : var(--b-neutral-15);
    --b-widget-border-radius-large            : 1em;

    --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-list-checkbox-checked-check-color      : 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-55);
    --b-slide-toggle-checked-thumb-background : var(--b-neutral-50);
    --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-toolbar-background                    : var(--b-neutral-98);

    --b-tooltip-rich-padding                  : 1em;
    --b-tooltip-rich-background               : var(--b-neutral-94);
    --b-tooltip-plain-background              : var(--b-neutral-94);

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

    /* endregion */

    /* Grid */
    --b-grid-header-background                : var(--b-neutral-95);
    --b-grid-header-color                     : var(--b-neutral-10);
    --b-grid-cell-color                       : var(--b-neutral-20);
    --b-grid-cell-border-color                : var(--b-neutral-85);
    --b-grid-header-font-weight               : 400;
    --b-grid-footer-background                : var(--b-grid-header-background);
    --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);

    /* Scheduler */
    --b-column-lines-tick-color               : var(--b-neutral-93);

    /* TaskBoard */
    --b-task-board-card-background            : var(--b-neutral-95);
    --b-task-board-card-hover-background      : var(--b-neutral-92);
}

/* 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-hover-background             : var(--b-primary-92);
    --b-button-type-text-focused-background           : var(--b-primary-90);
    --b-button-type-text-pressed-background           : var(--b-primary-95);

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

    --b-chip-view-chip-background                     : var(--b-primary-85);
    --b-chip-view-chip-hover-background               : var(--b-primary-80);

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

    --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-neutral-55);
    --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-text-field-selection-background               : var(--b-primary-70);

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

/* endregion */

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

    /* Scheduler */
    --b-resource-time-range-background      : var(--b-primary-70);
    --b-resource-time-range-color           : var(--b-primary-70);

    /* Calendar */
    --b-day-view-body-background            : var(--b-primary-90);

    /* Colorize */
    --b-task-board-card-selected-background : var(--b-neutral-90);
}

/* Override specific event styles in Scheduler */
.b-sch-event-wrap {
    --b-sch-event-tonal-background             : color-mix(in srgb, var(--b-primary), var(--b-mix) 80%);
    --b-sch-event-tonal-hover-background       : color-mix(in srgb, var(--b-primary), var(--b-mix) 60%);
    --b-sch-event-indented-background          : color-mix(in srgb, var(--b-primary), var(--b-mix) 80%);
    --b-sch-event-indented-hover-background    : color-mix(in srgb, var(--b-primary), var(--b-mix) 70%);
    --b-sch-event-indented-selected-background : color-mix(in srgb, var(--b-primary), var(--b-mix) 60%);
}

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