@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-label-default-gap: 0.5em;

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

    --b-label-above-width: auto;

    --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: 0.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: 0.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: 'above' 'inner';
    --b-text-field-default-template-rows: auto 1fr;
    --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: 0.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';
}