label {
	box-sizing: content-box;
	margin-right: var(--grid-base);
}

.checkbox-element {
	box-sizing: content-box;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
	padding: var(--grid-base);
	border-radius: 3px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
	border: solid 1px var(--form-field-border-colour);
	color: var(--form-field-colour);
	font-size: 14px;
}

input[type="text"].large,
input[type="email"].large,
input[type="password"].large,
input[type="search"].large,
textarea.large {
	padding: var(--spacer-two) var(--spacer-one);
}

input[type="checkbox"],
input[type="radio"] {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

.checkbox,
.radio {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.checkbox-element,
.radio-element {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	width: var(--spacer-one);
	height: var(--spacer-one);
	padding: calc(var(--grid-base) / 2);
	margin-right: var(--grid-base);
	background: var(--light);
	border: solid 1px var(--form-field-border-colour);
	border-radius: 3px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.radio-element {
	border-radius: var(--spacer-two);
}

.large .checkbox-element,
.large .radio-element {
	width: var(--spacer-two);
	height: var(--spacer-two);
}

.large .radio-element {
	border-radius: var(--spacer-two);
}

.large .tick {
	border-radius: 2px;
}

.large .selected {
	border-radius: var(--spacer-one);
}

.tick,
.selected {
	width: 0px;
	height: 0px;
	border-radius: 1px;
	background-color: var(--green-one-colour);
	opacity: 0;
	transition: all 0.2s linear;
}

.selected {
	border-radius: var(--spacer-one);
}

input[type="checkbox"]:checked + .checkbox-element .tick,
input[type="radio"]:checked + .radio-element .selected {
	width: var(--grid-base);
	height: var(--grid-base);
	opacity: 1;
}

.large input[type="checkbox"]:checked + .checkbox-element .tick,
.large input[type="radio"]:checked + .radio-element .selected {
	width: var(--spacer-two);
	height: var(--spacer-two);
	opacity: 1;
}

input[type="checkbox"]:disabled + .checkbox-element,
input[type="radio"]:disabled + .radio-element {
	opacity: 0.2;
}

.input-group {
	display: flex;
	align-items: center;
	padding: var(--grid-base);
}

.select {
	padding: var(--grid-base);
	min-width: 180px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23414141%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat, repeat;
	background-position:
		right 0.7em top 50%,
		0 0;
	background-size:
		0.65em auto,
		100%;
	border-radius: 3px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
	border: solid 1px var(--form-field-border-colour);
	color: var(--form-field-colour);
	font-size: 14px;
}

.select::-ms-expand {
	display: none;
}

.select:hover {
	border-color: #888;
}

.select:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 1px rgba(59, 153, 252, 0.7);
	color: var(--form-field-colour);
	outline: none;
}

.select > option {
	padding: var(--grid-base);
	color: var(--form-field-colour);
	font-weight: normal;
	font-size: 14px;
}