// Cerb base HTML styles

HTML, BODY {
	background-color: var(--cerb-color-background);
}

BODY, FORM, TD {
	font-family: var(--cerb-font-stack);
	font-size: var(--cerb-font-size);
	color: var(--cerb-color-background-contrast-50);
}

::-webkit-scrollbar {
	background-color: transparent;
	width: 5px;
	height: 5px;
	scrollbar-width: thin;
}

::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: var(--cerb-color-background-contrast-200);
}

A {
	cursor: pointer;
	text-decoration: underline;
	color: var(--cerb-color-link);
}

ABBR {
	text-decoration: none;
	border-bottom: 1px dotted var(--cerb-color-background-contrast-170);
}

H1 {
	font-weight: bold;
	font-size: 1.5em;
	color: var(--cerb-color-h1);
	margin: 0;
}

H2 {
	font-weight: bold;
	font-size: 1.5em;
	color: var(--cerb-color-h2);
	margin: 0 0 5px 0;
}

FIELDSET {
	border: 1px double var(--cerb-color-fieldset-border);
	margin-bottom: 5px;

	H1 {
		font-weight: normal;
		color: var(--cerb-color-fieldset-h1);
		margin: 0 0 5px 0;
		padding: 0;
		font-size: 120%;
	}

	LEGEND {
		color: var(--cerb-color-fieldset-legend);
		padding: 0 5px 0 0;
		font-size: 120%;
		font-weight: bold;

		A {
			color: var(--cerb-color-fieldset-legend);
		}
		
		LABEL {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		span.glyphicons {
			vertical-align: baseline;
			color: var(--cerb-color-fieldset-icon);
			margin-left: 5px;

			&:hover {
				color: var(--cerb-color-fieldset-icon--hover);
			}
		}
	}

	P {
		padding: 0;
		margin: 5px 2px;
	}
}

FORM {
	margin: 0;
	
	::placeholder {
		color: var(--cerb-color-background-contrast-170);
	}
}

INPUT[type=text], INPUT[type=password], INPUT[type=search] {
	border: 1px solid var(--cerb-color-background-contrast-180);
	background-color: var(--cerb-color-form-input-background);
	color: var(--cerb-color-text);
	outline: none;
	padding: 3px;

	&:focus {
		border: 1px solid var(--cerb-color-form-element-focus);
	}
}

TEXTAREA {
	border: 1px solid var(--cerb-color-background-contrast-180);
	background-color: var(--cerb-color-form-input-background);
	color: var(--cerb-color-text);
	outline: none;
	padding: 3px;

	&:focus {
		border: 1px solid var(--cerb-color-form-element-focus);
	}
}

SELECT {
	background-color: var(--cerb-color-form-input-background);
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3Argb(128,128,128)%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: auto 50%;
	border: 1px solid var(--cerb-color-background-contrast-180);
	border-radius:2px;
	color: var(--cerb-color-text);
	padding: 2px 30px 2px 4px;

	// disable default appearance
	outline: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	&::-ms-expand { display: none };

	&:focus {
		border: 1px solid var(--cerb-color-form-element-focus);
	}

	OPTGROUP {
		font-style: normal;
		font-weight: bold;
		color: var(--cerb-color-background-contrast-75);
	}
}

BUTTON {
	height: 2.4em;
	vertical-align: middle;
	color: var(--cerb-color-button-text);
	padding: 0.5em;
	font-weight: bold;
	margin: 0 1px 0 0;
	border: 0;
	cursor: pointer;

	background: linear-gradient(to bottom, var(--cerb-color-button-gradient), var(--cerb-color-button-gradient-to));
	border-radius: 0.5em;

	&:hover {
		background: linear-gradient(to bottom, var(--cerb-color-button-gradient), var(--cerb-color-button-gradient-to--hover));
		color: var(--cerb-color-button-icon--hover);
		cursor:pointer;
		
		SPAN.glyphicons {
			color: var(--cerb-color-button-icon--hover);
		}
	}

	&::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
	
	SPAN.glyphicons {
		color: var(--cerb-color-button-icon);
		font-size: 1.4em;
	}

	SPAN {
		vertical-align: middle;
	}
}
