// custom vars
$scheme-background: var(--background, #ffffff);
$scheme-text: var(--text, #4a4a4a);
$scheme-text-secondary: var(--text-secondary, #6b6464);
$scheme-text-strong: var(--text-strong, #363636);
$scheme-primary: var(--scheme-primary, #3273dc);
$scheme-link: var(--link, $scheme-primary);
$scheme-link-hover: var(--link-hover, $scheme-text-strong);
$scheme-shadow: var(--shadow, #0000003b);
$scheme-border: var(--border, #e1e1e1);
$scheme-border-secondary: var(--border-secondary, #c9d3ee);
$scheme-border-hover: var(--border-hover, #b5b5b5);
$scheme-border-active: var(--border-active, #4a4a4a);
$code-font-color: var(--code-font-color, #d01e49);
$card-expand-shadow-color: var(--card-expand-shadow-color, rgba(0, 0, 0, 0.1));
$card-expand-background-color: var(--card-expand-background-color, #f6f6f8);


// overriding bulma variables with CSS vars that can be replaced with other values when on a different scheme

$strong-color: $scheme-text-strong;

// KEY: $bulma-var: var(--css-var, #default-color || $default-color (taken from bulma defaults));
$title-color: var(--title-color, $scheme-text-strong);
$subtitle-color: var(--subtitle-color, $scheme-text);

$hr-background-color: var(--hr-background-color, #f5f5f5);

$button-color: var(--button-color, $scheme-text-strong);
$button-background-color: var(--button-background-color, $scheme-background);
$button-border-color: var(--button-border-color, $scheme-border);
$button-hover-color: var(--button-hover-color, $button-color);
$button-hover-border-color: var(--button-hover-border-color, $scheme-border-hover);
$button-active-color: var(--button-active-color, $button-color);
$button-active-border-color: var(--button-active-border-color, $scheme-border-active);
$button-disabled-color: var(--button-disabled-color, $button-color);
$button-disabled-background-color: var(--button-disabled-background-color, $button-background-color);
$button-disabled-border-color: var(--button-disabled-border-color, $button-border-color);

$code-background: var(--code-background, #f5f5f5);

$content-heading-color: var(--content-heading-color, $title-color);

$notification-background-color: var(--notification-background-color, #f5f5f5);

$card-background-color: var(--card-background-color, $scheme-background);
$card-header-color: var(--card-header-color, $scheme-text-strong);
$card-color: var(--card-color, $scheme-text);
$card-footer-border-top: 1px solid var(--card-footer-border-top, $scheme-border);

$modal-card-body-background-color: var(--modal-card-body-background-color, $scheme-background);
$modal-card-head-background-color: var(--modal-card-head-background-color, $scheme-background);
$modal-card-head-border-bottom: 1px solid var(--modal-card-head-border-bottom, $scheme-border);
$modal-card-foot-border-top: 1px solid var(--modal-card-foot-border-top, $scheme-border);
$modal-card-title-color: var(--modal-card-title-color, $scheme-text);

$menu-item-color: var(--menu-item-color, $scheme-text);
$menu-item-hover-background-color: var(--menu-item-hover-background-color, #e9eaed);
$menu-item-hover-color: var(--menu-item-hover-color, $scheme-text-strong);
$menu-label-color: var(--menu-label-color, #9e9e9e);
$menu-list-border-left: 1px solid var(--menu-list-border-left, $scheme-border);

$tabs-link-color: var(--tabs-link-color, $scheme-text);
$tabs-link-hover-color: var(--tabs-link-hover-color, $scheme-text-strong);
$tabs-link-active-color: var(--tabs-link-active-color, #3273dc);
$tabs-border-bottom-color: var(--tabs-border-bottom-color, $scheme-border);
$tabs-link-hover-border-bottom-color: var(--tabs-link-hover-border-bottom-color, currentcolor);
$tabs-link-active-border-bottom-color: var(--tabs-link-active-border-bottom-color, currentcolor);

$input-color: var(--input-color, $scheme-text-strong);
$input-background-color: var(--input-background-color, $scheme-background);
$input-placeholder-color: var(--input-placeholder-color, #3636364d);
$input-border-color: var(--input-border-color, $scheme-border);
$input-hover-border-color: var(--input-hover-border-color, $scheme-border-hover);
$input-focus-border-color: var(--input-focus-border-color, #3273dc);
$input-disabled-color: var(--input-disabled-color, #7a7a7a);
$input-disabled-background-color: var(--input-disabled-background-color, #f5f5f5);
$input-disabled-border-color: var(--input-disabled-border-color, $scheme-border-secondary);
$input-disabled-placeholder-color: var(--input-disabled-placeholder-color, #7a7a7a4a);

$pagination-color: var(--pagination-color, $scheme-text-strong);
$pagination-hover-color: var(--pagination-hover-color, $scheme-text-strong);
$pagination-focus-color: var(--pagination-focus-color, $scheme-text-strong);
$pagination-border-color: var(--pagination-border-color, $scheme-border);
$pagination-hover-border-color: var(--pagination-hover-border-color, $scheme-border-hover);
$pagination-focus-border-color: var(--pagination-focus-border-color, $scheme-border-hover);

$panel-block-color: var(--panel-block-color, $scheme-text-strong);
$panel-item-border: 1px solid var(--panel-item-border, $scheme-border);
$panel-block-hover-background-color: var(--panel-block-hover-background-color, #f5f5f5);

$list-item-color: var(--list-item-color, $scheme-text);
$list-background-color: var(--list-background-color, $scheme-background);
$list-item-border: 1px solid var(--list-item-border, $scheme-border);

// other bulma overrides
$list-shadow: 0 0 0 1px $scheme-border, 0 2px 3px $scheme-shadow;
$card-header-shadow: 0 0.125em 0.25em $scheme-shadow;

// custom vars
$select-color: var(--select-color, $strong-color);
$select-background-color: var(--select-background-color, $scheme-background);
$select-border-color: var(--select-border-color, $scheme-border);
$select-hover-border-color: var(--select-hover-border-color, $scheme-border-hover);
