/* Product theme profile bridge.
 *
 * Bootstrap 5.3 exposes global --bs-* colours, but its compiled component rules copy many of
 * those colours into local variables as literals. This file is loaded only when a host supplies
 * AppShellAssets.ThemeProfileStylesheetPaths. It reconnects those component variables to the
 * final product profile without changing Velex's default rendering for existing hosts. */

:root,
[data-bs-theme="light"] {
    --app-theme-primary-contrast: #fff;
    --app-theme-secondary-contrast: #fff;
    --app-theme-success-contrast: #fff;
    --app-theme-info-contrast: #000;
    --app-theme-warning-contrast: #000;
    --app-theme-danger-contrast: #fff;
    --app-theme-light-contrast: #000;
    --app-theme-dark-contrast: #fff;

    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 40%, black);
    --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 40%, black);
    --bs-success-text-emphasis: color-mix(in srgb, var(--bs-success) 40%, black);
    --bs-info-text-emphasis: color-mix(in srgb, var(--bs-info) 40%, black);
    --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-warning) 40%, black);
    --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 40%, black);
    --bs-light-text-emphasis: color-mix(in srgb, var(--bs-light) 40%, black);
    --bs-dark-text-emphasis: color-mix(in srgb, var(--bs-dark) 40%, black);

    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, white);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 20%, white);
    --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 20%, white);
    --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 20%, white);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 20%, white);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 20%, white);
    --bs-light-bg-subtle: color-mix(in srgb, var(--bs-light) 20%, white);
    --bs-dark-bg-subtle: color-mix(in srgb, var(--bs-dark) 20%, white);

    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 40%, white);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 40%, white);
    --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 40%, white);
    --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 40%, white);
    --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 40%, white);
    --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 40%, white);
    --bs-light-border-subtle: color-mix(in srgb, var(--bs-light) 40%, white);
    --bs-dark-border-subtle: color-mix(in srgb, var(--bs-dark) 40%, white);
}

[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 60%, white);
    --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 60%, white);
    --bs-success-text-emphasis: color-mix(in srgb, var(--bs-success) 60%, white);
    --bs-info-text-emphasis: color-mix(in srgb, var(--bs-info) 60%, white);
    --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-warning) 60%, white);
    --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 60%, white);
    --bs-light-text-emphasis: color-mix(in srgb, var(--bs-light) 60%, white);
    --bs-dark-text-emphasis: color-mix(in srgb, var(--bs-dark) 60%, white);

    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, black);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 20%, black);
    --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 20%, black);
    --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 20%, black);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 20%, black);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 20%, black);
    --bs-light-bg-subtle: color-mix(in srgb, var(--bs-light) 20%, black);
    --bs-dark-bg-subtle: color-mix(in srgb, var(--bs-dark) 20%, black);

    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 60%, black);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 60%, black);
    --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 60%, black);
    --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 60%, black);
    --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 60%, black);
    --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 60%, black);
    --bs-light-border-subtle: color-mix(in srgb, var(--bs-light) 60%, black);
    --bs-dark-border-subtle: color-mix(in srgb, var(--bs-dark) 60%, black);
}

.btn-primary,
.btn-outline-primary { --app-button-color: var(--bs-primary); --app-button-rgb: var(--bs-primary-rgb); --app-button-contrast: var(--app-theme-primary-contrast); }
.btn-secondary,
.btn-outline-secondary { --app-button-color: var(--bs-secondary); --app-button-rgb: var(--bs-secondary-rgb); --app-button-contrast: var(--app-theme-secondary-contrast); }
.btn-success,
.btn-outline-success { --app-button-color: var(--bs-success); --app-button-rgb: var(--bs-success-rgb); --app-button-contrast: var(--app-theme-success-contrast); }
.btn-info,
.btn-outline-info { --app-button-color: var(--bs-info); --app-button-rgb: var(--bs-info-rgb); --app-button-contrast: var(--app-theme-info-contrast); }
.btn-warning,
.btn-outline-warning { --app-button-color: var(--bs-warning); --app-button-rgb: var(--bs-warning-rgb); --app-button-contrast: var(--app-theme-warning-contrast); }
.btn-danger,
.btn-outline-danger { --app-button-color: var(--bs-danger); --app-button-rgb: var(--bs-danger-rgb); --app-button-contrast: var(--app-theme-danger-contrast); }
.btn-light,
.btn-outline-light { --app-button-color: var(--bs-light); --app-button-rgb: var(--bs-light-rgb); --app-button-contrast: var(--app-theme-light-contrast); }
.btn-dark,
.btn-outline-dark { --app-button-color: var(--bs-dark); --app-button-rgb: var(--bs-dark-rgb); --app-button-contrast: var(--app-theme-dark-contrast); }

:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light, .btn-dark) {
    --bs-btn-color: var(--app-button-contrast);
    --bs-btn-bg: var(--app-button-color);
    --bs-btn-border-color: var(--app-button-color);
    --bs-btn-hover-color: var(--app-button-contrast);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-button-color) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-button-color) 80%, black);
    --bs-btn-focus-shadow-rgb: var(--app-button-rgb);
    --bs-btn-active-color: var(--app-button-contrast);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-button-color) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-button-color) 75%, black);
    --bs-btn-disabled-color: var(--app-button-contrast);
    --bs-btn-disabled-bg: var(--app-button-color);
    --bs-btn-disabled-border-color: var(--app-button-color);
}

:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger, .btn-outline-light, .btn-outline-dark) {
    --bs-btn-color: var(--app-button-color);
    --bs-btn-border-color: var(--app-button-color);
    --bs-btn-hover-color: var(--app-button-contrast);
    --bs-btn-hover-bg: var(--app-button-color);
    --bs-btn-hover-border-color: var(--app-button-color);
    --bs-btn-focus-shadow-rgb: var(--app-button-rgb);
    --bs-btn-active-color: var(--app-button-contrast);
    --bs-btn-active-bg: var(--app-button-color);
    --bs-btn-active-border-color: var(--app-button-color);
    --bs-btn-disabled-color: var(--app-button-color);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 50%, white);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.list-group-item.active {
    color: var(--app-theme-primary-contrast);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.progress-bar {
    background-color: var(--bs-primary);
}