@import '../../../styles/mixins';
@import '../../../styles/definitions/forms';

// Component Variables
$icon-size: 16px;
$icon-spacing: 10px;

//Component Styles
.buttonIcon {
	&_button {
		@include button-reset;
		@include button-types;
		@include button-themes;
		@include button-states;
		@include button-sizes;
		@include border-radius($button_border-radius);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $bodyFontSize4;
		line-height: $genericLineHeight;
		outline: none;
		cursor: pointer;
		
		&--icon {
			&-right {
				flex-direction: row-reverse;
			}
		}

		&--size-input {
			padding-top: 0;
			padding-bottom: 0;
			height: $form-control-height;
		}
	}
	&_icon {
		flex-shrink: 0;
		height: $icon-size;
		fill: inherit;

		&--small {
			height: $icon-size * 0.8;
		}

		&--large {
			height: $icon-size * 1.4;
		}
	}

	&_icon--left + &_text {
		margin-left: $icon-spacing;
	}

	&_icon--right + &_text {
		margin-right: $icon-spacing;
	}
}
