.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,
		.ph-bold {
			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,
			.ph-bold {
				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,
				.ph-bold {
					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,
				.ph-bold {
					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,
				.ph-bold {
					color: $color-text-light;
				}
			}
		}
	}

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

		&.with-icon {
			.ph,
			.ph-bold {
				color: $color-text-dark;
			}
		}

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

			&.with-icon {
				.ph,
				.ph-bold {
					color: $color-text-dark;
				}
			}
		}

		&.with-icon {
			.ph,
			.ph-bold {
				left: -28px;
			}
		}
	}

	&.btn-small {
		font-size: $font-size-md;
		font-weight: $font-weight-medium;
		padding: $space-sm $space-sm;

		&.with-icon {
			border-left-width: 32px;

			.ph,
			.ph-bold {
				left: -40px;
				font-size: 22px;
			}
		}
	}

	&.btn-large {
		font-size: $font-size-xl;
		font-weight: $font-weight-bold;
		padding: $space-md $space-xxl;
	}
}

.btn-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;

	background: transparent;
	color: $color-text-light;
	font-size: $font-size-xl;
	border: 0;

	transition-duration: .2s;
	transition-property: transform, color;

	transform: rotate(0);

	&:hover {
		transform: rotate(90deg);
		color: $color-text-dark;
	}
}