@import "../../../includes/shared-assets/scss/_variables";
button.first {
	margin-right: 20px;
}

button.secondary {
	background: $color-text;
	border: 1px solid $color-text;
	color: $color-white;
}

button.secondary:focus,
button.secondary:hover {
	background: lighten($color-text, 10%);
	border: 1px solid lighten($color-text, 10%);
}

button.tertiary {
	background: $color-white;
	border: 1px solid $color-text;
	color: $color-text;
}

button.no-border {
	background: $color-white;
	border: none;
	color: $color-text;
}

button.tertiary:focus,
button.tertiary:hover {
	color: $color-primary;
	background: $color-white;
	border: 1px solid $color-primary;
}

button.taxonomies {
	margin-left: auto;
	margin-right: 14px;
}

button.add-option {
	border: 1px solid transparent;
	padding: 14px 4px 14px 0;

	&:focus,
	&:hover {
		border-color: $color-primary;
		a {
			color: $color-primary-hover;
		}
		svg path {
			fill: $color-primary-hover;
		}
	}

	&:hover {
		border-color: transparent;
		box-shadow: none;
	}
}

button.remove-option {
	border: 1px solid transparent;

	span {
		color: $color-warning;
		padding-left: 7px;
	}

	&:focus,
	&:hover {
		border-color: $color-primary;
		a {
			color: $color-primary-hover;
		}

		span {
			color: $color-warning-hover;
		}

		svg path {
			fill: $color-warning-hover;
		}
	}

	&:hover {
		border-color: transparent;
		box-shadow: none;
	}
}

button.warning {
	background: $color-warning;
	color: $color-white;
	border: 1px solid $color-warning;
}

button.warning:focus,
button.warning:hover {
	background: $color-warning-hover;
	border: 1px solid $color-warning-hover;
}

button.options svg {
	display: block; // For vertical centering.
}

button.options {
	background-color: transparent;
	border: none;
	color: $color-text;
	height: 100%;
	padding: 0 30px;
}

.model-list-empty button {
	margin-top: 23px;
}