.btn {
	font-family: $font_family_base;
	font-size: $font_size_lg;
	font-weight: $font_weight_semibold;
	line-height: $line_height_base;
	letter-spacing: $letter_spacing_wide;
	padding: $space-3 $space-lg;
	border-radius: 0;
	border-width: 2px;
	border-left-width: 6px;
	border-style: solid;
	border-color: $color-primary;
	text-transform: uppercase;
	background-color: transparent;
	transition-duration: .2s;
	transition-property: background-color, border-color, color;

	&.with_icon {
		border-left-width: 48px;
		position: relative;

		.ph {
			position: absolute;
			color: #0a0a0d;
			left: -48px;
			top: 0;
			font-size: 28px;
			height: 100%;
			display: inline-flex;
			align-items: center;
			width: 48px;
			justify-content: center;
			transition-duration: .2s;
			transition-property: color, left;
		}
	}

	&:hover {
		&.with_icon {
			.ph {
				left: -28px;
			}
		}
	}

	&.btn_primary {
		color: $color-primary;
		border-color: $color-primary;

		&:hover {
			background-color: $color-primary;
			color: $color-black;
		}
	}

	&.btn_secondary {
		color: $color-secondary;
		border-color: $color-secondary;

		&:hover {
			background-color: $color-secondary;
			color: $color-text-light;
			
			&.with_icon {
				.ph {
					color: $color-text-light;
				}
			}
		}
	}

	&.btn_accent {
		color: $color-accent;
		border-color: $color-accent;

		&:hover {
			background-color: $color-accent;
			color: $color-text-light;

			&.with_icon {
				.ph {
					color: $color-text-light;
				}
			}
		}
	}

	&.btn_danger {
		color: $color-error;
		border-color: $color-error;

		&:hover {
			background-color: $color-error;
			color: $color-black;
		}
	}

	&.btn_warning {
		color: $color-warning;
		border-color: $color-warning;

		&:hover {
			background-color: $color-warning;
			color: $color-black;
		}
	}

	&.btn_success {
		color: $color-success;
		border-color: $color-success;

		&:hover {
			background-color: $color-success;
			color: $color-black;
		}
	}

	&.btn_info {
		color: $color-info;
		border-color: $color-info;

		&:hover {
			background-color: $color-info;
			color: $color-text-light;

			&.with_icon {
				.ph {
					color: $color-text-light;
				}
			}
		}
	}

	&[disabled] {
		color: $color-text-dark;
		border-color: $color-dark;
		background-color: $color-dark;

		&.with_icon {
			.ph {
				color: $color-text-dark;
			}
		}

		&:hover {
			background-color: $color-dark;
			color: $color-text-dark;

			&.with_icon {
				.ph {
					color: $color-text-dark;
				}
			}
		}

		&.with_icon {
			.ph {
				left: -28px;
			}
		}
	}

	&.btn_small {
		font-size: $font_size_md;
		font-weight: $font_weight_medium;
		padding: $space-sm $space-sm;
	}

	&.btn_large {
		font-size: $font_size_xl;
		font-weight: $font_weight_bold;
		padding: $space-md $space-xxl;
	}
}