/**
 *  Main file for colors
 *  
 *  @todo
 *  ATTENTION!!! The :root part is created dynamically while setting the colors in Settings->Appearance->Colors
 *  
 *  @package wasp
 *  @since 1.0.0
 */

/* Set CSS variables */

/******* Start script output *******/
:root {
	--bs-primary:#4272ff;
	--bs-secondary:#6c757d;
	--bs-success:#198754;
	--bs-info:#0dcaf0;
	--bs-warning:#ffc107;
	--bs-danger:#dc3545;
	--bs-light:#f8f9fa;
	--bs-dark:#212529;
	--bs-body-color:#333333;
	--bs-body-bg:#f0f0f0;
	--bs-border-color:#dee2e6;
	
	--wasp-placeholder-color:var(--bs-gray);
	
	--wasp-primary-color:#fff;
	--wasp-primary-bg:var(--bs-primary);
	--wasp-primary-border-color:var(--bs-primary);
	--wasp-primary-hover-color:#fff;
	--wasp-primary-hover-bg:#2252df;
	--wasp-primary-hover-border-color:var(--wasp-primary-hover-bg);
	--wasp-primary-focus-shadow-rgb:98, 146, 255;
	
	--wasp-secondary-color:#fff;
	--wasp-secondary-bg:var(--bs-secondary);
	--wasp-secondary-border-color:var(--bs-secondary);
	--wasp-secondary-hover-color:#fff;
	--wasp-secondary-hover-bg:#4c555d;
	--wasp-secondary-hover-border-color:var(--wasp-secondary-hover-bg);
	--wasp-secondary-focus-shadow-rgb:223, 223, 223;
	
	--wasp-sidebar-bg:var(--bs-dark);
	--wasp-sidebar-color:#fff;
	--wasp-sidebar-item-color:#fff;
	--wasp-sidebar-item-hover-bg:var(--bs-primary);
	--wasp-sidebar-item-hover-color:#fff;
	
	--wasp-modal-bg:var(--bs-dark);
	--wasp-modal-header-bg:var(--bs-primary);
	--wasp-modal-color:#fff;

	--wasp-focus-box-shadow:0 0 0 0.25rem rgba(66, 114, 255, 0.25);
	
	--wasp-switch-bg-image-focus:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
	
	--wasp-is-warning-bg-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffc107' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E");
	
}
/******* Stop script output *******/

/**
 *  Buttons
 */
.btn-primary {
	--bs-btn-color:var(--wasp-primary-color);
	--bs-btn-bg:var(--wasp-primary-bg);
	--bs-btn-border-color:var(--wasp-primary-border-color);
	--bs-btn-hover-color:var(--wasp-primary-hover-color);
	--bs-btn-hover-bg:var(--wasp-primary-hover-bg);
	--bs-btn-hover-border-color:var(--wasp-primary-hover-border-color);
	--bs-btn-focus-shadow-rgb:var(--wasp-primary-focus-shadow-rgb);
	--bs-btn-active-color:var(--wasp-primary-hover-color);
	--bs-btn-active-bg:var(--wasp-primary-hover-bg);
	--bs-btn-active-border-color:var(--wasp-primary-hover-border-color);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--wasp-primary-color);
	--bs-btn-disabled-bg:var(--wasp-primary-bg);
	--bs-btn-disabled-border-color:var(--wasp-primary-border-color);
}

.btn-secondary {
	--bs-btn-color:var(--wasp-secondary-color);
	--bs-btn-bg:var(--wasp-secondary-bg);
	--bs-btn-border-color:var(--wasp-secondary-border-color);
	--bs-btn-hover-color:var(--wasp-secondary-hover-color);
	--bs-btn-hover-bg:var(--wasp-secondary-hover-bg);
	--bs-btn-hover-border-color:var(--wasp-secondary-hover-border-color);
	--bs-btn-focus-shadow-rgb:var(--wasp-secondary-focus-shadow-rgb);
	--bs-btn-active-color:var(--wasp-secondary-hover-color);
	--bs-btn-active-bg:var(--wasp-secondary-hover-bg);
	--bs-btn-active-border-color:var(--wasp-secondary-hover-border-color);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--wasp-secondary-color);
	--bs-btn-disabled-bg:var(--wasp-secondary-bg);
	--bs-btn-disabled-border-color:var(--wasp-secondary-border-color);
}

.btn-outline-primary {
	--bs-btn-color:var(--wasp-primary-bg);
	--bs-btn-border-color:var(--wasp-primary-bg);
	--bs-btn-hover-color:#fff;
	--bs-btn-hover-bg:var(--wasp-primary-bg);
	--bs-btn-hover-border-color:var(--wasp-primary-bg);
	--bs-btn-focus-shadow-rgb:var(--wasp-primary-focus-shadow-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg:var(--wasp-primary-bg);
	--bs-btn-active-border-color:var(--wasp-primary-bg);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--wasp-primary-bg);
	--bs-btn-disabled-bg:transparent;
	--bs-btn-disabled-border-color:var(--wasp-primary-bg);
	--bs-gradient:none;
}

.btn-outline-secondary {
	--bs-btn-color:var(--wasp-secondary-bg);
	--bs-btn-border-color:var(--wasp-secondary-bg);
	--bs-btn-hover-color:#fff;
	--bs-btn-hover-bg:var(--wasp-secondary-bg);
	--bs-btn-hover-border-color:var(--wasp-secondary-bg);
	--bs-btn-focus-shadow-rgb:var(--wasp-secondary-focus-shadow-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg:var(--wasp-secondary-bg);
	--bs-btn-active-border-color:var(--wasp-secondary-bg);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--wasp-secondary-bg);
	--bs-btn-disabled-bg:transparent;
	--bs-btn-disabled-border-color:var(--wasp-secondary-bg);
	--bs-gradient:none;
}

/**
 *  Navigation
 */
.sidebar {
	background:var(--wasp-sidebar-bg);
	color:var(--wasp-sidebar-color);
}

.nav-link {
	color:var(--wasp-primary-bg);
}
.nav-link:hover, .nav-link:focus {
	color:var(--wasp-primary-color);
	background:var(--wasp-primary-bg);
}
.nav-link.disabled {
	color:var(--bs-nav-link-disabled-color);
}
.sidebar .nav-link {
	color:var(--wasp-sidebar-color);
}

.nav-pills {
	--bs-nav-pills-link-active-color:var(--wasp-primary-color);
	--bs-nav-pills-link-active-bg:var(--wasp-primary-bg);
}


/**
 *  Modal
 */
.modal-content {
	background:var(--wasp-modal-bg);
	color:var(--wasp-modal-color);
}
.modal-header {
	background:var(--wasp-modal-header-bg);
}
.modal-header i {
	color:var(--wasp-modal-color);
}

/**
 *  Forms
 */
.form-control {
	color:var(--bs-body-color);
}
.form-control:focus {
	border-color:var(--wasp-primary-border-color);
	box-shadow:var(--wasp-focus-box-shadow);
}
.form-floating > .form-control.use-placeholder:focus::placeholder {
	color:var(--wasp-placeholder-color);
}
.form-select {
	color:var(--bs-body-color);
}
.form-select:focus {
	border-color:var(--wasp-primary-border-color);
	box-shadow:var(--wasp-focus-box-shadow);
}

.input-group-text {
	background-color:var(--bs-body-bg);
}

/**
 *  Checkboxes
 */
.form-check-input:checked {
	background-color:var(--wasp-primary-bg);
	border-color:var(--wasp-primary-border-color);
}
.form-check-input:focus {
	border-color:var(--wasp-primary-border-color);
	box-shadow:var(--wasp-focus-box-shadow);
}
.form-check-input[type=checkbox]:indeterminate {
	background-color:var(--wasp-primary-bg);
	border-color:var(--wasp-primary-bg);
}

/**
 *  Switches
 */
.form-switch .form-check-input:focus {
	background-image:var(--wasp-switch-bg-image-focus);
}