button {
	letter-spacing: @body-letter-spacing;

	svg {
		.square(2.4rem);
		color: @mid-grey;
		fill: currentcolor;
		vertical-align: middle;
		transition: 
			color @transition-fast ease-in-out,
			fill @transition-fast ease-in-out;

		path {
			transition: 
				color @transition-fast ease-in-out,
				fill @transition-fast ease-in-out;
		}
	}

	&:not(:disabled):hover,
	&:not(:disabled):focus {

		svg {

			path {
				fill: @button-hover-color;
			}
		}
	}
}

.button-icon-left {
	position: relative;
	padding-left: 36px;

	svg {
		position: absolute;
		top: 50%;
		left: 6px;
		margin-top: -12px;
	}
}

.button-small {

	svg {
		.square(1.6rem);
	}
}

.button-primary {

	svg {

		path {
			fill: @button-primary-color;
		}
	}

	&:not(:disabled):hover,
	&:not(:disabled):focus {

		svg {

			path {
				fill: @button-primary-hover-color;
			}
		}
	}
}

.button-group.dropdown {
	
	.caret {
		margin: 0;
	}
}

.button-icon {
	padding: 6px;
	background: transparent;
	border: none;

	&.button-small {
		padding: 5px;
	}

	&:not(:disabled):hover,
	&:not(:disabled):focus {
		background: transparent;
		border: none;
	}
}