.btn {
	/**
    * Button base
    */
	display: inline-block;
	vertical-align: middle;
	touch-action: manipulation;
	user-select: none;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
	border: 0;
	background: transparent;
	//	transition: all 0.15s ease-in-out;

	&--primary {
		padding: 20px 28px;
		background-color: $quaternary-color;
		color: $secondary-color;
		font-family: $ff-roboto-condensed-sans;
		@include ms-respond(font-size, 1);
		border: 1px solid transparent;
		line-height: 1;
		font-weight: $fw-bold;
		transition: all 0.3s ease-in-out;
		&:hover {
			background-color: transparent;
			border: 1px solid $secondary-color;
		}
	}

	&--secondary {
		padding: 16px 28px;
		background-color: $secondary-color;
		color: #57b361;
		font-family: $ff-serif;
		font-size: 16px;
		line-height: 1;
		border-radius: 25px;
		border: 1px solid transparent;
		transition: all 0.25s ease-in-out;
		&:hover {
			//background-color: $secondary-color-dark;
			background-color: transparent;
			border: 1px solid $secondary-color;
			color: $secondary-color;
		}
	}

	&--tertiary {
		position: relative;
		margin-left: 8px;
		padding: 16px 22px;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		&:before {
			content: '';
			position: absolute;
			//top: 0;
			left: 0;
			display: block;
			border-radius: 28px;
			background-color: rgba($octonary-color, 0.5);
			width: 50px;
			height: 50px;
			transition: all 0.3s ease;
		}
		span {
			position: relative;
			font-weight: $fw-bold;
			letter-spacing: 0.2em;
		}
		svg {
			position: relative;
			top: 0;
			margin-left: 10px;
			fill: none;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke: #111;
			stroke-width: 2;
			transform: translateX(-5px);
			transition: all 0.3s ease;
		}

		&:hover {
			&:before {
				width: 100%;
				background: rgba($octonary-color, 1);
			}

			svg {
				transform: translateX(0);
			}
		}

		&:active {
			transform: scale(0.96);
		}
	}

	&--lg {
	}

	&--md {
	}

	&--sm {
	}

	&--disabled {
		pointer-events: none;
	}

	&--w-icon {
		display: flex;
		align-items: baseline;
	}
}