button,
.button,
a.button,
input[type=submit] {
	display: inline-block;
	padding: 0.5em 1.25em;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	outline: none;
	border-radius: 0.5rem;
	border: 0.125em solid var(--primary);
	color: var(--white);
	background-color: var(--primary);
	cursor: pointer;
	transition: background-color 250ms, color 250ms, border-color 250ms;
	appearance: none;
	-webkit-appearance: none;
}

button:hover,
a.button:hover {
	color: var(--white);
	background-color: var(--primary-dark);
}

a.button-primary {
	background-color: var(--primary);
}

a.button-primary:hover {
	background-color: var(--primary-dark);
}

a.button-secondary {
	color: var(--accent);
	border: 0.125em solid var(--secondary);
	background-color: var(--secondary);
}

a.button-secondary:hover {
	background-color: var(--accent);
}

a.button-accent {
	border: 0.125em solid var(--accent);
	background-color: var(--accent);
}

a.button-accent:hover {
	border: 0.125em solid var(--primary);
	background-color: var(--accent);
}

a.button-neutral,
.button-neutral {
	color: var(--accent);
	border: 0.125em solid transparent !important;
	background-color: transparent;
}

a.button-neutral:hover,
.button-neutral:hover {
	color: var(--primary-dark);
	border: 0.125em solid transparent !important;
	background-color: transparent;
}

.button-bare {
	margin: 0;
	padding: 0;
	border: 0.125em solid transparent;
	background-color: transparent;
}

a.button--large,
.button--large {
	font-size: 1rem;
}

@media(min-width: 37.5em) {
	a.button--large,
	.button--large {
		font-size: 1.25rem;
	}
}

@media(min-width: 50em) {
	a.button--large,
	.button--large {
		font-size: 1.5rem;
	}
}

a.button--medium,
.button--medium {
	font-size: 1rem;
}

@media(min-width: 50em) {
	a.button--medium,
	.button--medium {
		font-size: 1.25rem;
	}
}

a.button--small,
input.button--small,
.button--small {
	padding: 0.35em 1em;
	font-size: 0.75rem;
	border-radius: 0.3rem;
}

@media(min-width: 37.5em) {
	a.button--small,
	.button--small {
		font-size: 0.9rem;
	}
}



a.button-outline-primary,
.button-outline-primary,
a.button--inactive,
.button--inactive {
	color: var(--primary-dark);
	border: 0.125em solid var(--border-lighter) !important;
	background-color: var(--white);
}

a.button-outline-primary:hover,
.button-outline-primary:hover,
a.button--inactive:hover,
.button--inactive:hover {
	color: var(--primary-dark);
	border: 0.125em solid var(--primary) !important;
	background-color: var(--white);
}

a.button--active,
.button--active {
	color: var(--white);
	font-weight: bold;
	border: 0.125em solid var(--primary) !important;
	background-color: var(--primary);
}

a.button--active:hover,
.button--active:hover {
	color: var(--white);
	background-color: var(--primary-dark);
}



.button-delete {
	font-weight: normal !important;
	color: #cc0000 !important;
	border: 0.125em solid #ff000030 !important;
	background-color: var(--white) !important;
}



.button + .button {
	margin-left: 1rem;
}

.listing-selection-wrapper .button--active,
.listing-selection-wrapper .button--inactive {
	margin-bottom: 1rem;
	padding: 0.75em 2em;
}

@media(min-width: 37.5em) {
	.listing-selection-wrapper .button--active,
	.listing-selection-wrapper .button--inactive {
		padding: 0.75em 4em;
	}
}

.listing-selection-wrapper .button-neutral {
	padding: 0.75rem 1.5rem;
}