@import "theme.css";

div.form {
	&.label {
		font-weight: bold;
		margin-top: var(--form_margin);

		&:first-child {
			margin-top: 0;
		}

		&.required:after {
			content: "*";
			margin-left: 4px;
			color: #900;
		}
	}

	&.widget {
	}

	&.separator {
		margin-top: var(--form_margin);
		border-bottom: 2px solid #cacaca;
	}
}

button.form {
	background-color: var(--form_button_background);

	color: var(--form_button_foreground);
	border: 1.5px solid var(--form_button_foreground);
	padding: var(--form_button_padding);
	line-height: 1;
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;

	&:hover {
		border: 1.5px solid var(--form_button_hover);
		color: var(--form_button_hover);

	}
}

table.form {
	width: 100%;
	margin-top: 16px;
	border-collapse: collapse;

	th {
		text-align: left;
		padding-right: 16px;
		&:last-child {
			padding-right: var(--form_table_padding_last);
		}
	}

	td {
		background-color: var(--form_table_background);
		padding: var(--form_table_padding);
		border: 1px solid var(--form_table_border);
		&:last-child {
			padding-right: var(--form_table_padding_last);
		}
	}

	&.borderless {
		td {
			border: none;
			padding-left: 0px;
		}
	}
}

select.form {
	background-color: var(--form_select_background);

	&[disabled] {
		opacity: 0.4;
	}
}

@media only screen and (max-width: 800px) {
	table.form {
		margin-top: 0px;

		td:first-child { border-left: none }
		td:last-child { border-right: none }
	}
}