@import '../lumo/lumo.css';
@import 'tokens.css';

@import 'fonts/open-sans/stylesheet.css';
@import 'fonts/outfit/stylesheet.css';

@import 'hyper/labels.css';
@import 'hyper/readonly-field.css';
@import 'hyper/spacer.css';

@import 'ui/app-layout.css';
@import 'ui/dashboard.css';
@import 'ui/login-form.css';
@import 'ui/notifications.css';
@import 'ui/ol.css';
@import 'ui/select.css';
@import 'ui/scenario-select.css';
@import 'ui/scenario-status.css';
@import 'ui/vaadin-custom-field.css';
@import 'ui/vaadin-switch.css';
@import 'ui/vaadin-multi-select-combo-box.css';
@import 'ui/vaadin-popover-overlay.css';
@import 'ui/vaadin-tooltip-overlay.css';
@import 'ui/vaadin-side-nav-item.css';
@import 'ui/vaadin-form-item.css';
@import 'ui/vaadin-text-area.css';
@import 'ui/filter-value-field.css';

@import 'components.css';



:host,
 html {
	
	/* Base (background) */
	
	--lumo-base-color: #FFF;
	--lumo-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	

	--lumo-box-shadow-xs: 0 0 10px 0px var(--lumo-shade-20pct);
    --lumo-box-shadow-s: 0 0 1px 0px var(--lumo-shade-40pct), 0 0 12px 1px var(--lumo-shade-20pct);
    --lumo-box-shadow-m: 0 0 6px -1px var(--lumo-shade-40pct), 0 0 24px -4px var(--lumo-shade-20pct);
    --lumo-box-shadow-l: 0 0 18px -2px var(--lumo-shade-40pct), 0 0 48px -6px var(--lumo-shade-20pct);
    --lumo-box-shadow-xl: 0 0 24px -3px var(--lumo-shade-40pct), 0 0 64px -8px var(--lumo-shade-20pct);
	
	--vaadin-input-field-height: var(--rtlscloud-size-s);
	--lumo-text-field-size: var(--lumo-size-s);
	
	--lumo-size-xl: 46px;
    --lumo-size-l: 40px;
    --lumo-size-m: 38px;
    --lumo-size-s: 32px;
    --lumo-size-xs: 28px;
	
	--lumo-font-size: 18px;
    --lumo-font-size-xxxl: 42px;
    --lumo-font-size-xxl: 32px;
    --lumo-font-size-xl: 22px;
    --lumo-font-size-l: 18px;
    --lumo-font-size-m: 14px;
    --lumo-font-size-s: 12px;
    --lumo-font-size-xs: 10px;
    --lumo-font-size-xxs: 8px;
    
    --lumo-line-height-m: normal;
    --lumo-line-height-s: normal;
    --lumo-line-height-xs: normal;
    
    --lumo-space-xl: 20px;
    --lumo-space-l: 15px;
    --lumo-space-m: 10px;
    --lumo-space-s: 7px;
    --lumo-space-xs: 5px;
    --lumo-space-xxs: 3px;
    
	/* Error */
	--lumo-error-color: hsl(3, 100%, 61%);
	--lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);
	--lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);
	--lumo-error-text-color: hsl(3, 92%, 53%);
	--lumo-error-contrast-color: #FFF;
	/* Success */
	--lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */
	--lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);
	--lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);
	--lumo-success-text-color: hsl(145, 100%, 32%);
	--lumo-success-contrast-color: #FFF;
	
	 /* Tint */
    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
    --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
    --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
    --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
    --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
    --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
    --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
    --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
    --lumo-tint: #fff;
	
	/* Shade */
	--lumo-shade-5pct: hsla(0, 0%, 91%);
    --lumo-shade-10pct: hsla(0, 0%, 85%);
    --lumo-shade-20pct: hsla(0, 0%, 80%);
    --lumo-shade-30pct: hsla(0, 0%, 75%);
    --lumo-shade-40pct: hsla(0, 0%, 60%);
    --lumo-shade-50pct: hsla(0, 0%, 50%);
    --lumo-shade-60pct: hsla(0, 0%, 40%);
    --lumo-shade-70pct: hsla(0, 0%, 30%);
    --lumo-shade-80pct: hsla(0, 0%, 20%);
    --lumo-shade-90pct: hsla(0, 0%, 10%);
	--lumo-shade: hsl(214, 35%, 15%);
	
	/* Contrast */
	--lumo-contrast-5pct: var(--lumo-shade-5pct);
	--lumo-contrast-10pct: var(--lumo-shade-10pct);
	--lumo-contrast-20pct: var(--lumo-shade-20pct);
	--lumo-contrast-30pct: var(--lumo-shade-30pct);
	--lumo-contrast-40pct: var(--lumo-shade-40pct);
	--lumo-contrast-50pct: var(--lumo-shade-50pct);
	--lumo-contrast-60pct: var(--lumo-shade-60pct);
	--lumo-contrast-70pct: var(--lumo-shade-70pct);
	--lumo-contrast-80pct: var(--lumo-shade-80pct);
	--lumo-contrast-90pct: var(--lumo-shade-90pct);
	--lumo-contrast: var(--lumo-shade);
	/* Text */
	--lumo-header-text-color: var(--lumo-contrast);
	--lumo-body-text-color: var(--lumo-primary-color);
	--lumo-secondary-text-color: var(--lumo-contrast-70pct);
	--lumo-tertiary-text-color: var(--lumo-contrast-50pct);
	--lumo-disabled-text-color: var(--lumo-contrast-30pct);
	--lumo-contrast-text-color: #FFF;
      
	/* Primary */
	--lumo-primary-color: hsl(0, 0%, 30%);
	--lumo-primary-color-50pct: hsla(0, 0%, 30%, 0.5);
	--lumo-primary-color-20pct: hsla(0, 0%, 40%, 0.2);
	--lumo-primary-color-10pct: hsla(0, 0%, 40%, 0.1);
	--lumo-primary-color-5pct: hsla(0, 0%, 40%, 0.05);
	--lumo-primary-text-color: var(--lumo-primary-color);
	--lumo-primary-contrast-color: #FFF;
	--lumo-header-text-color: var(--lumo-primary-text-color);
    
	--vaadin-selection-color: hsl(211, 100%, 50%);
	--vaadin-selection-color-text: hsl(211, 100%, 50%);

	/* InputField colors */
	--vaadin-input-field-placeholder-color: hsla(0, 0%, 50%);
    
    /* Button colors */
    --vaadin-button-text-color: var(--rtlscloud-primary-color);
    --vaadin-button-background: var(--rtlscloud-contrast-10pct);
	--vaadin-button-primary-background: var(--vaadin-selection-color);
	--vaadin-button-secondary-background: #FFF;
	
	--lumo-border-radius: 5px;
	
	/* COLORS*/
	--accent-color: hsl(211, 100%, 50%);
	--disabled-color: gray;
	/* gray is exactly hsl(0, 0%, 50%); the faded variant marks a device switched off on
	   purpose, so it reads apart from the plain gray of one that merely dropped out. */
	--disabled-color-50pct: hsla(0, 0%, 50%, 0.5);
	
	/*STATUS COLORS*/
	--info-color: hsl(211, 100%, 50%);
	--info-color-50pct: hsla(211, 100%, 50%, 0.5);
	--info-color-10pct: hsla(211, 100%, 50%, 0.1);
	
	--warning-color: hsl(42, 100%, 55%);
	--warning-color-50pct: hsla(42, 100%, 55%, 0.5);
	--warning-color-10pct: hsla(42, 100%, 55%, 0.1);
	
	--error-color: hsl(15, 100%, 40%);
	--error-color-50pct: hsla(15, 100%, 40%, 0.5);
	--error-color-10pct: hsla(15, 100%, 40%, 0.1);

	--success-color: hsl(147, 100%, 30%);
	--success-color-50pct: hsla(147, 100%, 30%, 0.5);
	--success-color-10pct: hsla(147, 100%, 30%, 0.1);
		
    --app-layout-bar-left-padding: 0 var(--rtlscloud-space-s);
    --app-layout-bar-middle-padding: var(--app-layout-bar-left-padding);
    --app-layout-bar-right-padding: var(--app-layout-bar-left-padding);
    
    /* TODO still needed font-weight? */
    /* FONT */
	--font-weight-light:     300;
	--font-weight-normal:    400;
	--font-weight-medium:    500;
	--font-weight-semibold:  600;
	--font-weight-bold:      700;
	--font-weight-extrabold: 800;
    
    /* SIZE CONSTANTS */
    --size-xxs: 24px;
    --size-xs:  32px;
    --size-s:   40px;
    --size-m:   48px;
    --size-l:   56px;
    --size-xl:  64px;
    
    --lumo-icon-size-xxs: 12px;
    --lumo-icon-size-xs: 14px;
    --lumo-icon-size-s: 18px;
    --lumo-icon-size-m: 20px;
    --lumo-icon-size-l: 24px;
    --lumo-icon-size-xl: 32px;
    
    --context-menu-overlay-color: var(--rtlscloud-base-color);
    --context-menu-border-color: var(--rtlscloud-shade-30pct);
    
    --modal-backdrop-color: hsla(0, 0%, 0%, 0.4);
    
	--drawer-background: var(--rtlscloud-shade-5pct);
	
	--overlay-background-transparent: hsla(0, 0%, 95%, 0.9);
	--overlay-background: var(--rtlscloud-shade-5pct);
	--overlay-box-shadow: 0 0 0 1px var(--rtlscloud-shade-5pct), var(--rtlscloud-box-shadow-m);
	
    --app-layout-background: var(--rtlscloud-base-color);
    --app-layout-bar-background-base-color: var(--rtlscloud-base-color);
    --app-layout-bar-background-color: var(--rtlscloud-base-color);
    --app-layout-bar-font-color: var(--rtlscloud-header-text-color);
    --app-layout-bar-left-background-color: var(--drawer-background);
    --app-layout-bar-shadow: none;
    --app-layout-drawer-shadow: none;
    --app-layout-drawer-background-color: var(--drawer-background);
    
    /* HYPER BUTTON */
    --hyper-button-badge-background: var(--accent-color);
    --hyper-button-selected-text-color: var(--rtlscloud-primary-contrast-color);
    --hyper-button-selected-background: var(--accent-color);
    
    /* TIMELINE */
    --timeline-item-background-color:			var(--rtlscloud-shade-40pct);
    --timeline-item-border-color:				var(--rtlscloud-shade-40pct);
    --timeline-item-selected-background-color: 	var(--accent-color);
    --timeline-item-selected-border-color:		var(--accent-color);  
    
    /* MODAL DIALOG */
    --modal-dialog-header-background: var(--rtlscloud-shade-5pct);
    --modal-dialog-footer-background: var(--rtlscloud-shade-5pct);
    
    --vertical-tabs-background: var(--rtlscloud-shade-10pct);
    
    --ol-mouseposition-background: var(--overlay-background-transparent);
    --ol-control-background: var(--overlay-background-transparent);
	
	
	font-family: var(--rtlscloud-font-family);
	background: var(--rtlscloud-base-color);
	color: var(--rtlscloud-body-text-color);
    
}
/* REQUIRED INDICATORS 
*[required]:not(vaadin-radio-group):not([readonly]):not([disabled]):after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid var(--error-color);
    border-bottom: 8px solid transparent;
    border-right: 8px solid transparent;
}
*/

/* THIS IS FOR VISIBILITY MANAGEMENT OF COMPONENTS THAT ARE ONLY VISIBLE IN CASE OF HOVER */
[show~="hover"] {
    visibility: hidden;
}
[show-on-hover-container]:hover [show~="hover"] {
    visibility: visible;
}
/* THIS IS FOR VISIBILITY MANAGEMENT OF COMPONENTS THAT ARE ONLY VISIBLE IN CASE OF SELECTED ITEM */
[show~="select"] {
    visibility: hidden;
}
[show-on-select-container][selected] [show~="select"] {
    visibility: visible;
}

.v-loading-indicator {
   background-color: var(--accent-color)!important;
}

.v-loading-indicator.first {
   height: 6px!important;
}

.v-loading-indicator.second {
   height: 8px!important;
}

.v-loading-indicator.third {
   height: 10px!important;
}