.button {
	font-size: 35px;
	font-weight: 600;
	border-width: 4px;
	border-style: solid;
	text-decoration: none;
	border-radius: 20px;
	padding: 14px 18px 16px 18px;
	margin: 10px;
	margin-left: 0px;
	display: inline-block;
}

.htButton {
	.button();

	@media @light {
		border-color: @darkHtColor;
		color: @darkHtColor;
		&:hover, &:focus {
			background-color: @darkHtColor;
			&::selection {
				color: @darkHtColor;
			}
		}
		&::selection {
			background-color: @darkHtColor;
		}
	}

	@media @dark {
		border-color: @lightHtColor;
		color: @lightHtColor;
		&:hover, &:focus {
			background-color: @lightHtColor;
			&::selection {
				color: @lightHtColor;
			}
		}
		&::selection {
			background-color: @lightHtColor;
		}
	}
}

.regButton {
	.button();

	@media @light {
		border-color: @darkRegColor;
		color: @darkRegColor;
		&:hover, &:focus {
			background-color: @darkRegColor;
			&::selection {
				color: @darkRegColor;
			}
		}
		&::selection {
			background-color: @darkRegColor;
		}
	}

	@media @dark {
		border-color: @lightRegColor;
		color: @lightRegColor;
		&:hover, &:focus {
			background-color: @lightRegColor;
			&::selection {
				color: @lightRegColor;
			}
		}
		&::selection {
			background-color: @lightRegColor;
		}
	}
}

.nsButton {
	.button();

	@media @light {
		border-color: @darkNsColor;
		color: @darkNsColor;
		&:hover, &:focus {
			background-color: @darkNsColor;
			&::selection {
				color: @darkNsColor;
			}
		}
		&::selection {
			background-color: @darkNsColor;
		}
	}

	@media @dark {
		border-color: @lightNsColor;
		color: @lightNsColor;
		&:hover, &:focus {
			background-color: @lightNsColor;
			&::selection {
				color: @lightNsColor;
			}
		}
		&::selection {
			background-color: @lightNsColor;
		}
	}
}

.authButton {
	.button();

	@media @light {
		border-color: @darkAuthColor;
		color: @darkAuthColor;
		&:hover, &:focus {
			background-color: @darkAuthColor;
			&::selection {
				color: @darkAuthColor;
			}
		}
		&::selection {
			background-color: @darkAuthColor;
		}
	}

	@media @dark {
		border-color: @lightAuthColor;
		color: @lightAuthColor;
		&:hover, &:focus {
			background-color: @lightAuthColor;
			&::selection {
				color: @lightAuthColor;
			}
		}
		&::selection {
			background-color: @lightAuthColor;
		}
	}
}

@media @light {
	.htButton:hover, .regButton:hover, .nsButton:hover, .authButton:hover,
	.htButton:focus, .regButton:focus, .nsButton:focus, .authButton:focus {
		color: @lightColor;
		&::selection {
			background-color: @lightColor;
		}
	}
}

@media @dark {
	.htButton:hover, .regButton:hover, .nsButton:hover, .authButton:hover,
	.htButton:focus, .regButton:focus, .nsButton:focus, .authButton:focus {
		color: @darkColor;
		&::selection {
			background-color: @darkColor;
		}
	}
}