/**
*  Buttons in einheitlichem Stil
*
*  Lotsen- und Call-To-Action-Links im Button Stil und eigenen Farben
*
*  @markup:
*
*  @shortcode:
[c-button style="" target="" title="" text="" icon=""]
*
*
**/


.c-button {
	transition: background 0.6s ease-out;
	border-radius: var(--border-radius);
	width: 100%;
	max-width: var(--measure);

	:focus {
		outline: 3px solid var(--cta-primary-focus-ring);
		outline-offset: 2px;
	}

}

.c-button__link {
	display: flex;
	flex-direction: row;
	-webkit-column-gap: var(--space-s);
	-moz-column-gap: var(--space-s);
	column-gap: var(--space-s);
	align-items: center;
	font-family: var(--sans);
	text-decoration: none;
	transition: all 0.6s ease-out;

	& span:first-child {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-right: var(--space-xxs);
		padding-left: var(--space-m);
		flex-grow: 0;
		border-right-width: 2px;
		border-right-color: var(--light);
		border-right-style: solid;
	}

	& span:last-child {
		margin-top: 0;
		flex-grow: 999;
		align-self: center;
		line-height: var(--lh--2);
		padding: 0 var(--space-s) 0 0;
		max-height: 4em;
	}

	& svg {
		width: var(--fs-4);
		height: var(--fs-4);
	}

	&:hover {
		color: var(--cool-1);
		text-decoration: none;
	}
}

.c-button--primary {
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
	border: 2px solid var(--btn-primary-border);
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);

	&:hover {
		background: var(--btn-primary-hover-bg);

		.c-button__link {
			color: var(--btn-primary-hover-text);
		}
	}
	&:focus {
		border-color: var(--btn-primary-focus-ring);
	}
	&:disabled {
		background-color: var(--btn-primary-disabled-bg);
		color: var(--btn-primary-disabled-text);
	}

	.c-button__link {
		color: var(--btn-primary-text);
		font-weight: 700;

		& span:first-child {
			min-height: 4em;
			border-right-color: var(--btn-primary-border);
		}

		& span:last-child {
			max-height: 4em;
		}

		& svg {
			width: var(--fs-4);
			height: var(--fs-4);
		}
	}
}

.c-button--secondary {
	margin-top: var(--space-2xs);
	border: 2px solid var(--btn-secondary-border);
	background: var(--btn-secondary-bg);

	&:hover {
		background: var(--btn-secondary-hover-bg);
	}

	.c-button__link {
		-webkit-column-gap: var(--space-xs);
		-moz-column-gap: var(--space-xs);
		column-gap: var(--space-xs);
		font-weight: 500;
		color: var(--btn-secondary-text);

		& span:first-child {
			padding-right: var(--space-3xs);
			padding-left: var(--space-s);
			min-height: 3em;
			border-right-color: var(--btn-secondary-border);
		}

		& span:last-child {
			padding: 0 var(--space-xs) 0 0;
			line-height: var(--lh--1);
			max-height: 3em;
		}

		& svg {
			width: var(--fs-3);
			height: var(--fs-3);
		}

		&:hover {
			color: var(--cool-2);
		}
	}
}

.c-button--lotse {
	border-radius: var(--border-radius);
	color: var(--cool-1);
	background-color: var(--warm);
	border-color: var(--warm);

	&:hover {
		background-color: var(--warm2);
		border-color: var(--warm2);
	}

	.c-button__link {
		color: var(--cool-1);
	}
}

.c-button--cta {
	border-radius: var(--border-radius);
	background-color: var(--fresh);
	border-color: var(--fresh);

	&:hover {
		background-color: var(--fresh2);
		border-color: var(--fresh2);
	}

	.c-button__link {
		color: var(--cool);
	}
}