/* use custom properties to set our default color scheme */

:root,
:where(.pf-v5-theme-dark):root {
    color-scheme: light;
    --ecc-color-white: #fff;
    --ecc-color-card-bg: var(--ecc-color-white);
    --ecc-color-text: #444;
    --ecc-color-primary: #0a67a3;
    --ecc-color-primary-hover: #085282;
    --ecc-color-page-bg: #f5f5f5;
    --ecc-color-appheader-bg: #ddd;
    --ecc-color-menuitem-text: var(--ecc-color-text);
    --ecc-color-menuitem-hover-text: var(--ecc-color-menuitem-text);
    --ecc-color-menuitem-hover-bg: rgba(143,153,168,.15);
    --ecc-color-menuitem-active-text: #215db0;
    --ecc-color-menuitem-active-bg: rgba(45,114,210,.1);
}

.pf-v5-c-page,
:where(.pf-v5-theme-dark) .pf-v5-c-page {
    --pf-v5-c-page--BackgroundColor: var(--ecc-color-page-bg);
    --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--ecc-color-page-bg);
    --pf-v5-global--Color--100: var(--ecc-color-text);
    --pf-v5-global--primary-color--100: var(--ecc-color-primary);
    --pf-v5-global--BackgroundColor--300: var(--ecc-color-page-bg);
    --pf-v5-global--BackgroundColor--400: var(--ecc-color-page-bg);
}

.pf-v5-c-masthead,
:where(.pf-v5-theme-dark) .pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--ecc-color-appheader-bg);
}

.pf-v5-c-page__sidebar,
:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--ecc-color-card-bg);
}

.pf-v5-c-nav__link,
:where(.pf-v5-theme-dark) .pf-v5-c-nav__link {
    --pf-v5-c-nav__link--Color: var(--ecc-color-menuitem-text);
    --pf-v5-c-nav__link--hover--Color: var(--ecc-color-menuitem-hover-text);
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--ecc-color-menuitem-hover-bg);
    --pf-v5-c-nav__link--focus--Color: var(--ecc-color-menuitem-hover-text);
    --pf-v5-c-nav__link--focus--BackgroundColor: var(--ecc-color-menuitem-hover-bg);
    --pf-v5-c-nav__link--m-current--Color: var(--ecc-color-primary);
    --pf-v5-c-nav__link--m-current--BackgroundColor: var(--ecc-color-menuitem-active-bg);
    --pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav__link--m-current--Color);
    --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav__link--m-current--BackgroundColor);
    --pf-v5-c-nav__link--m-current--after--BorderColor: var(--ecc-color-primary-hover);
}

.pf-v5-c-menu,
:where(.pf-v5-theme-dark) .pf-v5-c-menu {
    --pf-v5-c-menu__item--Color: var(--ecc-color-menuitem-text);
    --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--ecc-color-menuitem-hover-bg);
    --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--ecc-color-menuitem-hover-bg);
}

.pf-v5-c-menu-toggle,
:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {
    --pf-v5-c-menu-toggle--BackgroundColor: var(--ecc-color-card-bg);
    --pf-v5-c-menu-toggle--Color: var(--ecc-color-text);
    --pf-v5-c-menu-toggle--m-expanded--Color: var(--ecc-color-text);
}

.pf-v5-c-form-control,
:where(.pf-v5-theme-dark) .pf-v5-c-form-control {
    --pf-v5-c-form-control--Color: var(--ecc-color-text);
    --pf-v5-global--primary-color--100: var(--ecc-color-primary);
    --pf-v5-c-form-control--BorderRadius: 2px;
    --pf-v5-c-form-control--BorderTopColor: var(--ecc-color-appheader-bg);
    --pf-v5-c-form-control--BorderRightColor: var(--ecc-color-appheader-bg);
    --pf-v5-c-form-control--BorderBottomColor: var(--ecc-color-appheader-bg);
    --pf-v5-c-form-control--BorderLeftColor: var(--ecc-color-appheader-bg);
    --pf-v5-c-form-control--hover--BorderTopColor: var(--ecc-color-appheader-bg);
    --pf-v5-c-form-control--hover--BorderRightColor: var(--ecc-color-appheader-bg);
    --pf-v5-c-form-control--hover--BorderBottomColor: var(--ecc-color-appheader-bg);
    --pf-v5-c-form-control--hover--BorderLeftColor: var(--ecc-color-appheader-bg);
    background-color: var(--ecc-color-white);
}

.pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-button,
:where(.pf-v5-theme-dark) .pf-v5-c-button,
:where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button  {
    --pf-v5-c-button--m-plain--Color: var(--ecc-color-text);
    --pf-v5-c-button--m-primary--Color: var(--ecc-color-white);
    --pf-v5-c-button--m-primary--hover--Color: var(--ecc-color-white);
    --pf-v5-c-button--m-primary--BackgroundColor: var(--ecc-color-primary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ecc-color-primary-hover);
    --pf-v5-c-button--m-link--Color: var(--ecc-color-primary);
    --pf-v5-c-button--m-link--hover--Color: var(--ecc-color-primary-hover);
}

.pf-v5-c-toolbar, 
:where(.pf-v5-theme-dark) .pf-v5-c-toolbar {
    --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor) !important;
}