/**
	Patterns from Google material: https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android

	- 1: Switch
  - 2: Card, raised button, quick entry / search bar
  - 3: Refresh indicator, quick entry / search bar (scrolled state)
  - 4: App bar
  - 6: Floating action button (FAB) (rest), Snackbar
  - 8: Bottom nav bar, Menu, Card (when picked up), Raised button (pressed state) {
  - 9: Sub menu (+1dp for each sub menu)
	- 12: Foloaction acount button (FAB - pressed)
  - 16: Nav drawer, Right drawer, Modal button Sheet
  - 24: Dialog, Picker
*/

/*#region    Typography */

/*#endregion Typography */

/* @import './_d-mixins-field.pcss'; use the d-field-pcss */

/**
 * Resources: 
 *  - Google Materials Color: https://material.io/design/color/#tools-for-picking-colors
 **/

:root{

	/* google gray palette */
	--d-clr-gray-000: #FFFFFF;
	--d-clr-gray-050: #FAFAFA;
	--d-clr-gray-100: #F5F5F5;
	--d-clr-gray-200: #EEEEEE;
	--d-clr-gray-300: #E0E0E0;
	--d-clr-gray-400: #BDBDBD;
	--d-clr-gray-500: #9E9E9E;
	--d-clr-gray-600: #757575;
	--d-clr-gray-700: #616161;
	--d-clr-gray-800: #424242;
	--d-clr-gray-900: #212121;


	/* google material light blue palette */
	--d-clr-050: #E1F5FE;
	--d-clr-100: #B3E5FC;
	--d-clr-200: #81D4FA;
	--d-clr-300: #4FC3F7;
	--d-clr-400: #29B6F6;
	--d-clr-500: #03A9F4;
	--d-clr-600: #039BE5;
	--d-clr-700: #0288D1;
	--d-clr-800: #0277BD;
	--d-clr-900: #01579B;
	--d-clr-A100: #80D8FF;
	--d-clr-A200: #40C4FF;
	--d-clr-A400: #00B0FF;
	--d-clr-A700: #0091EA;

	--d-clr-prime: var(--d-clr-700);

	--d-field-bkg: var(--d-clr-gray-000);
	--d-field-bdr: #aaa;
	--d-field-bdr-focused: var(--d-clr-prime);
	--d-field-input: var(--d-clr-gray-900);
	--d-field-label: var(--d-clr-gray-700);
	--d-field-label-no-value: var(--d-clr-gray-500);
	--d-field-label-focused: var(--d-clr-800);
	--d-field-trail-text: var(--d-clr-gray-600);


	--d-field-choice-bdr: var(--d-clr-gray-500);
	--d-field-choice-bdr-on: var(--d-clr-prime);
	--d-field-choice-ico: #fff;

	--d-field-placholder-clr: var(--d-clr-gray-700);

	--d-select-option-ov-bkg: var(--d-clr-gray-100);
	--d-select-option-noval-clr: var(--d-clr-gray-600);


	/*#region    Layout */
	--d-field-v-padding: 1rem;
	/*#endregion Layout */
}

/*#region    d-field */

.d-field input, .d-field textarea{
		-webkit-appearance: none;
		-moz-appearance: none;
		padding-left: 0;
		padding-right: 0;
	}

/* NOTE: for now supports only ico-lead or ico-trail, ico-trail or text-trail */

.d-field{
	background: var(--d-field-bkg);
	position: relative;
	min-height: 3.25rem;
	display: grid;
	grid-template-rows: .5rem 1fr;
	grid-template-columns: var(--d-field-v-padding) 1fr  var(--d-field-v-padding) ;
	align-items: stretch;

}

.d-field[ico-lead]{
		grid-template-columns: 2.5rem 1fr  var(--d-field-v-padding);
	}

.d-field[ico-trail]{
		grid-template-columns:  var(--d-field-v-padding) 1fr 2.5rem;
	}

.d-field[text-trail]{
		grid-template-columns:  var(--d-field-v-padding) 1fr auto;
	}

.d-field[disabled]{
		opacity: .5;
	}

.d-field[readonly]{
		border-bottom: solid 1px var(--bdr-lighter);
	}

.d-field.focused > d-ico{
			fill: var(--d-field-bdr-focused);
		}

.d-field.focused > label {
			grid-row: 1;
			color: var(--d-field-label-focused);
		}

.d-field.focused .box{
			border: solid 1px var(--d-field-bdr-focused);
		}

.d-field > label {
		-webkit-font-smoothing: antialiased;
		text-decoration: inherit;
		text-transform: inherit;
		font-size: .75rem;
		letter-spacing: .00929em;
		line-height: 1;
		font-weight: 400;
		color: var(--d-txt-label);;
		background: white;
		color: var(--d-field-label);
		/* transform: translate(1rem,.25rem); */
		position: absolute;
		left: .5rem;
		padding: 0 .5rem;
		z-index: 12; /* need to fix that */
		display: inline-flex;		
	}

.d-field > .label-trail{
		position: relative;
		grid-row: 1;
		grid-column: 2;
		height: .75rem;
		justify-self: end;
	}

.d-field > .text-trail{
		-webkit-font-smoothing: antialiased;
		text-decoration: inherit;
		text-transform: inherit;
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 400;
		letter-spacing: .03125em;
		color: var(--d-txt-input);;		
		grid-row: 2;
		grid-column: 3;
		background: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 .5rem;
		color: var(--d-field-trail-text);
	}

/* label repositioning when no-value */

.d-field.no-value:not([placeholder]):not(.focused) > label{
				-webkit-font-smoothing: antialiased;
				text-decoration: inherit;
				text-transform: inherit;
				font-size: 1rem;
				line-height: 1.5rem;
				font-weight: 400;
				letter-spacing: .03125em;
				color: var(--d-txt-input);;
				color: var(--d-field-label-no-value);
				background: none;
				grid-row: 2;
				grid-column: 2;
				position: relative;
				left: 0;
				padding: 0;
				display: block;
				display: flex;
				align-items: center;
			}

.d-field[placeholder].no-value{
		/* color: var(--d-field-label-no-value); */
		color: red;
	}

.d-field[placeholder].no-value .d-ipt{
			color: var(--d-field-input);
		}

.d-field.no-value[ico-lead]:not([placeholder]):not(.focused) > label{
			/* padding-left: 2.5rem; */
		}

.d-field > .box {
		grid-row: 2;
		grid-column: 1 / span 4;
		border: solid 1px var(--d-field-bdr);
		border-radius: 3px;
		z-index: 0;
	}

.d-field > .d-ipt {
		grid-row: 2;
		grid-column: 2;		
		-webkit-font-smoothing: antialiased;		
		text-decoration: inherit;		
		text-transform: inherit;		
		font-size: 1rem;		
		line-height: 1.5rem;		
		font-weight: 400;		
		letter-spacing: .03125em;		
		color: var(--d-txt-input);;
		color: var(--d-field-input);
		box-shadow: none;
		background: none;
		outline: none;
		border: none;
		z-index: 2;		
	}

.d-field[ico-lead] > .d-ipt{
		/* padding-left: 2.5rem; */
	}

.d-field[ico-trail] > .d-ipt{
		/* padding-right: 2.5rem; */
	}

.d-field > d-ico {
		grid-row: 2 ;
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		z-index: 2;	
		
	}

.d-field > d-ico svg.symbol{
			width: 1.5rem;
			height: 1.5rem;
		}

.d-field > d-ico.trail{
			grid-column: 3;
		}

.d-field > d-ico.lead{
			grid-column: 1;
		}

.d-field.no-label{
		grid-template-rows: 0 1fr;
		min-height: 2.75rem;
	}

/*#endregion d-field */

/*#region    d-base-check-radio */

d-radio.d-field, d-check.d-field, .d-check{
	display: grid;
	grid-template-columns: 1.5rem .5rem 1fr;
	grid-template-rows: 1.5rem;
	min-height: 1.5rem;
	user-select: none;
	cursor: pointer;
	line-height: 1;

}

d-radio.d-field .d-ipt,d-check.d-field .d-ipt,.d-check .d-ipt{
		min-height: .75rem;
	}

d-radio.d-field.no-label,d-check.d-field.no-label,.d-check.no-label{
		grid-template-columns: 1.5rem;
		grid-template-rows: 1.5rem;
		min-height: auto;
		min-width: auto;
	}

d-radio.d-field.no-label .d-ipt,d-check.d-field.no-label .d-ipt,.d-check.no-label .d-ipt{
			grid-column: 1;
		}

d-radio.d-field label,d-check.d-field label,.d-check label{
		background: none;
		padding-left: 0;
		left: 0;
		position: relative;
		grid-row: 1;
		grid-column: 3;		
		-webkit-font-smoothing: antialiased;		
		text-decoration: inherit;		
		text-transform: inherit;		
		font-size: 1rem;		
		line-height: 1.5rem;		
		font-weight: 400;		
		letter-spacing: .03125em;		
		color: var(--d-txt-input);;
		display: flex;	
		align-items: center; /* vertical center */
	}

d-radio.d-field .d-ipt,d-check.d-field .d-ipt,.d-check .d-ipt{
		grid-row: 1;
		grid-column: 1;
		padding: 0;
		align-self: center;
		line-height: 1;
	}

d-radio.d-field .d-ipt svg.symbol,d-check.d-field .d-ipt svg.symbol,.d-check .d-ipt svg.symbol{
			width: 100%;
			height: 100%;	
		}

/*#endregion d-base-check-radio */

/*#region    d-check */

d-check.d-field .d-ipt,.d-check .d-ipt{
		height: 1rem;
		width: 1rem;
		border: solid 2px var(--d-field-choice-bdr);
	}

d-check.d-field .d-ipt svg.symbol,.d-check .d-ipt svg.symbol{
			display: none;
		}

d-check.d-field[checked] .d-ipt,.d-check[checked] .d-ipt{
			border: solid 2px var(--d-field-choice-bdr-on);
			background: var(--d-field-choice-bdr-on);			
		}

d-check.d-field[checked] .d-ipt svg.symbol,.d-check[checked] .d-ipt svg.symbol{
				display: block;
				fill: var(--d-field-choice-ico);
			}

/*#endregion d-check */

/*#region    d-radio */

d-radio.d-field .d-ipt,.d-radio .d-ipt{
		height: 1.5rem;			
	}

d-radio.d-field .d-ipt svg.symbol,.d-radio .d-ipt svg.symbol{
			fill: var(--d-field-choice-bdr);
		}

d-radio.d-field[checked] .d-ipt svg.symbol,.d-radio[checked] .d-ipt svg.symbol{
				fill: var(--d-field-choice-bdr-on);
			}

/*#endregion d-radio */

/*#region    d-ico d-symbol */

d-ico, d-symbol{
	/* making sure that parent don't change value case, which is used as asset name */
	text-transform: none; 
	padding: 0;
	margin: 0;
	max-width: 1.5rem;
	max-height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	fill: #aaa;
	user-select: none;
}

d-ico svg.symbol,d-symbol svg.symbol{
		max-width: 100%;
		max-height: 100%;
	}

/*#endregion d-ico d-symbol */

/*#region    d-input */

d-input.d-field{
	
}

/*#endregion d-input */

/*#region    d-text */

d-text.d-field d-ico{
		padding-top: .25rem;
		align-items: flex-start;
	}

d-text.d-field textarea.d-ipt{
		padding-top: .25rem;
		resize: none;
	}

d-text.d-field.no-value:not([placeholder]):not(.focused) > label{
			padding-top: .25rem;
			align-items: flex-start;
		}

/*#endregion d-text */

/*#region    d-select */

d-select.d-field{
	cursor: pointer;
	grid-template-columns: var(--d-field-v-padding) 1fr 2rem;

}

d-select.d-field[ico-lead]{
		grid-template-columns: 2.5rem 1fr 2rem;
	}

d-select.d-field > div.d-ipt{
		display: flex;
		align-items: center;
	}

/* Note: on Chrome, if visibility hidden on c-ico, we get unwanted horizontal scroll bar */

d-select.d-field[readonly] d-ico svg{
			visibility: hidden;
		}

d-select.d-field > d-ico.chevron{
		z-index: 2;		
		grid-column: 3;			
	}

d-select.d-field > d-ico.chevron svg.symbol{
			width: 1rem;
			height: 1rem;
		}

d-select-popup{
	position: absolute;
	box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
		0px 6px 10px 0px rgba(0, 0, 0, 0.14),
		0px 1px 18px 0px rgba(0, 0, 0, 0.12);;
	width: 8rem;
	/* height: 10rem; */
	background: #FFF;
	max-height: 15rem;
	overflow: auto;
	z-index: 100;

}

d-select-popup li.none{
		color: red;
	}

d-select-popup ul, d-select-popup li{
		margin: 0;
		padding: 0;
		color: var(--txt);
	}

d-select-popup ul > li, d-select-popup ul > a{
			cursor: pointer;
			line-height: 1;
			padding: 1rem 1rem;
		}

d-select-popup ul > li.sel,d-select-popup ul > a.sel{
				font-weight: 600;
			}

d-select-popup ul > li:hover,d-select-popup ul > a:hover{
				background: var(--d-select-option-ov-bkg);
			}

d-select-popup ul > li:not([data-val]),d-select-popup ul > a:not([data-val]){
				font-weight: 400;
				color: var(--d-select-option-noval-clr);
			}

d-select-popup ul > li{
			list-style: none;
		}

/*#endregion d-select */

/*#region    d-options */

d-options.d-field{
	display: grid;
	min-height: auto;
	align-items: center;

}

d-options.d-field > .d-ipt {
		display: grid;
		grid-auto-flow: column;
		grid-column-gap: .5rem;
		justify-items: center;
	}

d-options.d-field > .d-ipt > div {
			-webkit-font-smoothing: antialiased;
			text-decoration: inherit;
			text-transform: inherit;
			font-size: 1rem;
			line-height: 1.5rem;
			font-weight: 400;
			letter-spacing: .03125em;;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 2rem;
			cursor: pointer;
			color: var(--txt-L3);
			padding: 0 1rem;
			border-right: solid 1px var(--bdr-L4);
		}

d-options.d-field > .d-ipt > div.sel{
				color: var(--txt-prime);
				font-weight: 700;
			}

d-options.d-field > div:first-of-type{
		padding-left: 0;
	}

d-options.d-field > div:last-of-type{
		border-right: none;
	}

/*#endregion d-options */





/*# sourceMappingURL=ui.css.map */