.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--spacing-xs) / 2);
	padding: 14px 38px;
	border: 2px solid var(--color-secondary);

	color: var(--color-white);
	font-size: 1.125rem;
	line-height: 1;
	font-weight: 500;
	text-align: center;

	background-color: var(--color-secondary);

	opacity: 1;
	transition: all .3s ease-in-out;
	outline: none;

	&:hover,
	&:focus,
	&.active {
		background: transparent;
		color: var(--color-secondary);
		border-color: var(--color-secondary);
		cursor: pointer;
	}

	&.c-button--extra-large {
		padding: 10px var(--spacing-md);
		font-weight: bold;

		@media (width > 768px) {
			font-size: 40px;
		}
	}

	&.c-button--small {
		padding: 10px var(--spacing-md);

		font-size: 14px;
	}

	&.c-button--extra-small {
		padding: calc(var(--spacing-xs) / 4) calc(var(--spacing-xs) / 2);
		gap: calc(var(--spacing-xs) / 4);

		font-size: 14px;
	}

	&.c-button--part-rounded {
		border-top-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}

	&.c-button--blue {
		color: var(--color-white);
		border: 2px solid;
		border-color: var(--color-primary);
		background: var(--color-primary);

		&:hover,
		&:focus,
		&.active {
			background-color: transparent;
			border-color: var(--color-primary);
			color: var(--color-primary);
		}
	}

	&.c-button--gold {
		color: var(--color-white);
		border: 2px solid;
		border-color: var(--color-gold);
		background: var(--color-gold);

		&:hover,
		&:focus,
		&.active {
			background-color: transparent;
			color: var(--color-gold);
		}
	}

	&.c-button--green-light {
		color: var(--color-white);
		border: 2px solid;
		border-color: var(--color-green-light);
		background: var(--color-green-light);

		&:hover,
		&:focus,
		&.active {
			background-color: transparent;
			color: var(--color-green-light);
		}
	}

	&.c-button--border {
		color: var(--color-secondary);
		border: 2px solid var(--color-secondary);
		background: transparent;

		&:hover,
		&:focus,
		&.active {
			color: var(--color-white);
			background: var(--color-secondary);
			border-color: var(--color-secondary);
		}
	}

	&.c-button--blue.c-button--border {
		color: var(--color-primary);
		border-color: var(--color-primary);
		background: transparent;

		&:hover,
		&:focus,
		&.active {
			background-color: var(--color-primary);
			color: var(--color-white);
			border-color: var(--color-primary);
		}
	}

	&.c-button--white.c-button--border {
		color: var(--color-white);
		border-color: var(--color-white);
		background: transparent;

		&:hover,
		&:focus,
		&.active {
			background-color: var(--color-secondary);
		}
	}

	&.c-button--white-gold.c-button--border {
		color: var(--color-white);
		border-color: var(--color-white);
		background: transparent;

		&:hover,
		&:focus,
		&.active {
			background-color: var(--color-gold);
			color: var(--color-white);
			border-color: var(--color-white);
		}
	}

	&.c-button--green-light.c-button--border {
		color: var(--color-green-light);
		border-color: var(--color-green-light);
		background: transparent;

		&:hover,
		&:focus,
		&.active {
			background-color: var(--color-green-light);
			color: var(--color-white);
			border-color: var(--color-green-light);
		}
	}

	svg {
		width: auto;
		height: 16px;
	}
}