/*
 * Amazium CSS Framework
 * https://amazium.co.uk
 *
 * A lightweight, modern CSS framework built with Grid & Flexbox.
 * Designed and maintained by Mike Ballan.
 *
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

/***** Input Element *****/
input                                             				{ padding:10px; width:100%; min-height:38px; background:transparent; }
.input--hasIcon 												{
	input                             							{ padding-left:34px; }
	 > .icon                           							{ position:absolute; left:10px; top:50%; transform:translateY(-50%); }
}

/***** Select Element *****/
select                                            				{ padding:10px 40px 10px 10px; width:100%; min-height:38px; border:none; background:transparent; cursor:pointer; appearance:none; }
.input--select                                    				{ position:relative;
	&:after                              						{ content:''; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlFNERGRkExNTgwMTFFNjlCOTU5QjY1QkU5MkYyMDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlFNERGRkIxNTgwMTFFNjlCOTU5QjY1QkU5MkYyMDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUU0REZGODE1ODAxMUU2OUI5NTlCNjVCRTkyRjIwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUU0REZGOTE1ODAxMUU2OUI5NTlCNjVCRTkyRjIwOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PksuSU4AAADRSURBVHjaxNPNCkFBFMDxeyWPwDtYWLCwkZWQKFE+yhPwFLyCvRVWLJTIV8ra1sbSkhQlRXT91SwG9+rqklO/1XTOzJwzo2qaplgJm2IxLBewl8rVr5yghuAHeVlU5AJO9BAwkZxDAy65QAZzdOF/k5xGHS0U5QJHxLHAAF6d5ASa6KCA6/MUDohhiSE80lpU7DpCHhejMe4RxgpjuBFCG1NxhfPDGHWOukMEE9EXB2ZI4fTyDgyatRE797FFUvRJMVvgHmv4fv6U1b//xpsAAwDgFiuTckGaBAAAAABJRU5ErkJggg=="); background-repeat:no-repeat; background-size:10px; background-position:center; position:absolute; top:2px; right:1px; width:40px; height:38px; border-radius:2px; pointer-events:none; }
	option                             							{ padding:0 10px; border-bottom:1px solid var(--color-ui-600); }
	optgroup                           							{ color:var(--color-black); background:var(--color-ui-0); }
	optgroup[label]                    							{ padding-top:10px; font-weight:normal; }
	optgroup:first-child               							{ margin-top:10px; border-top:1px solid var(--color-ui-600); }
	:disabled                          							{ cursor:not-allowed; color:var(--color-ui-700); background:var(--color-ui-400); }
}

/***** Textarea Element *****/
textarea                                          				{ padding:10px; width:100%; min-height:100px; border:none; resize:none; background:transparent; }
.input--textarea textarea                         				{ overflow-y:auto; }

/***** Checkbox Element *****/
.input--checkbox 												{ box-shadow:none; border-radius:0; display:flex; flex-direction:column; gap:16px;
	> span label 												{ padding-left:30px; min-height:20px; width:100%; font-weight:normal; cursor:pointer; position:relative; display:inline-flex; }
	input 														{ display:none; }
	input + label::before 										{ content:''; position:absolute; left:0; top:2px; width:20px; height:20px; background-color:var(--color-ui-0); background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTFCRTE4Q0IxNTc5MTFFNjlCOTU5QjY1QkU5MkYyMDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTFCRTE4Q0MxNTc5MTFFNjlCOTU5QjY1QkU5MkYyMDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MkMxNjBDNjBFMTYxMUU2OUI5NTlCNjVCRTkyRjIwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMUJFMThDQTE1NzkxMUU2OUI5NTlCNjVCRTkyRjIwOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuFgne4AAADHSURBVHjaYvj//z8DGdgFiL8BcSM5mlWA+N1/CPhDqmY+IL72HwE6SNHMBMSbkDRvBImRYkArkuYLQMwDEidWcziS5hdALAeTAxFsQGyAR7MhNMRB4DsQWyDLg4j1UMkSLJrFgfghku2R6GoYkEwHgTAkSZDLDiHJNWNzIYiIQFL0E4htoZIzkcRXAjEjLgNAOB9J8Wcg3ofEPwPEXLjCCFc0wcATIJbEF0PIHJAT5yJpBoWNEaEoRhdgBuIV0OgKICaNAAQYAPD/2FJuxgMsAAAAAElFTkSuQmCC"); background-repeat:no-repeat; background-position:center; background-size:0; border:1px solid var(--color-ui-600); border-radius:var(--radius-sm); transition:all 0.2s ease; }
	input:checked + label::before 								{ background-color:var(--color-info-500); border-color:var(--color-info-500); background-size:10px; }
	input:disabled + label 										{ cursor:not-allowed; opacity:0.6; }
}

/***** Radio Element *****/
.input--radio 													{ box-shadow:none; display:flex; flex-direction:column; gap:16px;
	> span label 												{ padding-left:30px; min-height:20px; width:100%; font-weight:normal; cursor:pointer; position:relative; display:inline-flex; }
	input 														{ display:none; }
	input + label::before 										{ content:''; position:absolute; left:0; top:2px; width:20px; height:20px; border:2px solid var(--color-ui-600); border-radius:50%; background-color:var(--color-ui-0); transition:all 0.2s ease; }
	input:checked + label::before 								{ border:6px solid var(--color-info-500); }
	input:disabled + label 										{ cursor:not-allowed; opacity:0.6; }
}

/***** Radio Boxed *****/
.input--boxed 													{ display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); gap:16px;
	> span label												{ padding:16px 16px 16px 46px; box-shadow:var(--border-default); border-radius:var(--radius-md); }
	input + label::before 										{ left:16px; top:18px; }
	input:checked + label   		 							{ background-color:var(--color-ui-100); box-shadow:var(--border-focus); }
}

.input--stacked 												{ grid-template-columns:1fr; }

/***** Checkbox - Switch *****/

.input--switch	 												{ box-shadow:none; border-radius:0; display:flex; flex-direction:column; gap:16px;
	input 														{ display:none; }
	> span 														{ padding:0; width:auto; position:relative; top:0; left:0; }
	> span label 												{ margin:0; padding:0 0 0 46px; min-height:20px; width:100%; font-weight:normal; line-height:1.2; text-align:left; cursor:pointer; float:none; display:block; position:relative; left:0; top:0; }
	input + label:before 										{ content:''; background-color:var(--color-ui-400); display:block; width:36px; height:20px; border-radius:20px; position:absolute; top:0; left:0; z-index:5; transition:all 0.2s ease; }
	input + label:after 										{ content:''; background-color:var(--color-ui-0); display:block; width:16px; height:16px; border-radius:20px; position:absolute; top:2px; left:2px; z-index:6; transition:all 0.2s ease; }
	input:checked + label:before 								{ background-color:var(--color-info-500); }
	input:checked + label:after 								{ left:18px; }
}

/***** Radio - Toggle *****/
.input--toggle													{ padding:4px; border-radius:0; display:flex; flex-direction:row; border-radius:var(--radius-md);
	input														{ display:none; }
	> span														{ padding:0; display:flex; flex:1; position:relative; top:0; left:0; }
	> span label 												{ margin:0; padding:4px 10px; min-height:30px; width:100%; font-weight:normal; text-align:left; cursor:pointer; float:none; display:flex; align-items:center; justify-content:center; background-color:var(--color-ui-0); position:relative; left:0; top:0; transition:all 0.2s ease; }
	input:checked + label 										{ background-color:var(--color-info-500); color:var(--color-ui-0); border-radius:3px; transition:all 0.2s ease; }
}


/***********************************************
Screen - This applies from 1200px onwards
***********************************************/
@media (min-width:1200px) {

}


/***********************************************
Desktop HD
***********************************************/
@media (min-width:1440px)                       {

}