.svk-button {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	gap: var(--space-75);
	width: fit-content;
	color: var(--button-primary-text-color);
	background: var(--button-primary-background-color);
	border: none;
	border-radius: var(--border-radius-button);
	padding: var(--space-75) var(--space-150);
	font-size: inherit;
	font-weight: var(--font-weight-label);
	line-height: 1.3335;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;

	@media (hover: hover) {
		&:hover {
			color: var(--button-primary-text-color-hover);
			background-color: var(--button-primary-background-color-hover);
		}
	}

	&:focus-visible {
		outline: var(--support-border-focused) solid var(--support-color-focused);
	}

	&:active {
		color: var(--button-primary-text-color-active);
		background-color: var(--button-primary-background-color-active);
	}

	&[disabled] {
		pointer-events: none;
		opacity: 0.3;
	}

	&:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 44px;
		min-height: 44px;
		height: 100%;
		width: 100%;
		transform: translate(-50%, -50%);
	}

	svg {
		display: inline-flex;
		width: 1em;
		height: 1em;
	}

    /*
        Types
    */

	&.button--secondary {
		padding: calc(var(--space-75) - 1px) calc(var(--space-150) - 1px);
		border: 1px solid var(--button-secondary-border-color);
		color: var(--button-secondary-text-color);
		background: var(--button-secondary-background-color);

		@media (hover: hover) {
			&:hover {
				color: var(--button-secondary-text-color-hover);
				background-color: var(--button-secondary-background-color-hover);
				border-color: var(--button-secondary-background-color-hover);
			}
		}

		&:active {
			color: var(--button-secondary-text-color-active);
			background-color: var(--button-secondary-background-color-active);
			border-color: var(--button-secondary-background-color-active);
		}
	}

	&.button--tertiary {
		color: var(--button-tertiary-text-color);
		background-color: transparent;
		border-color: transparent;
		text-underline-offset: 0.2em;

		@media (hover: hover) {
			&:hover {
				color: var(--button-tertiary-text-color-hover);
				text-decoration: underline;
				border-color: transparent;
				text-decoration-thickness: 0.1em;
			}
		}

		&:active {
			color: var(--button-tertiary-text-color-active);
			border-color: transparent;
			text-decoration-thickness: 0.05em;
		}

		&.button--tertiary-inline {
			margin-left: calc(var(--space-150) * -1);
		}
	}

	&.button--loader {
		position: relative;
		overflow: hidden;
		transform: translateZ(0);
		user-select: none;

		&:after {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			content: '';
			background: var(--button-primary-background-color-hover);
			transform: translate(-102%, 0);
		}

		&.button--secondary:after {
			background: var(--color-brand-100);
		}

		&[loading] {
			pointer-events: none;

			&::after {
				animation: progress 5000ms forwards;
			}
		}
	}

	/*
	    Size
	*/

	&.button--size-300 {
		font-size: var(--font-size-300);
	}

	&.button--size-200 {
		padding: var(--space-100) var(--space-300);
		font-size: var(--font-size-100);
		line-height: 1.5175em;
		max-height: 56px;
	}

	&.button--size-100 {
		font-size: var(--font-size-100);
	}

	&.button--size-75 {
		padding: var(--space-75) var(--space-100);
		font-size: var(--font-size-75);
	}

	&.button--size-50 {
		padding: var(--space-50) var(--space-100);
		font-size: var(--font-size-75);
	}

	@media (max-width: 479px) {
		&.button--mobile-fill {
			width: 100%;
		}
	}

	&.button--fill {
		width: 100%;
	}

	/*
	    Anatomy
	*/

	&.button--icon {
		padding: 0.11125em;

		svg {
			display: inline-flex;
			width: 1em;
			height: 1em;
			position: relative;
			border-radius: 50%;
			padding: var(--space-75);
			box-sizing: content-box;

			&:after {
				position: absolute;
				inset: -0.167em;
				border-radius: 50%;
				content: '';
			}
		}

		&.button--size-75 svg:after {
			inset: -0.065em;
		}

		&.button--tertiary:hover svg:after {
			background-color: var(--button-tertiary-background-hover);
		}

		&.button--tertiary:active svg:after {
			background-color: var(--button-tertiary-background-active);
		}
	}

	&.button--icon-text {
		svg {
			position: relative;
			border-radius: 50%;
			padding: var(--space-75);
			box-sizing: content-box;

			&:after {
				position: absolute;
				inset: -0.167em;
				border-radius: 50%;
				content: '';
			}
		}

		&.button--size-small svg {
			padding: 0;
		}

		&.button--tertiary:hover svg:after {
			background-color: var(--button-tertiary-background-hover);
		}

		&.button--tertiary:active svg:after {
			background-color: var(--button-tertiary-background-active);
		}
	}

	@media print {
		display: none;
	}
}

@keyframes progress {
	0% {
		transform: translate(-100%, 0);
	}
	25% {
		transform: translate(-25%, 0);
	}
	100% {
		transform: translate(-10%, 0);
	}
}