@mixin ghost-animation($baseColor) {
	@keyframes ghostGradientAnimation {
		0% {
			background-position: -100% 0;
		}

		100% {
			background-position: 100% 0;
		}
	}

	@if (kv-color($baseColor, 'base')) {
		$color1: kv-color($baseColor, 'base', 0.3);
		$color2: kv-color($baseColor, 'base');

		background: linear-gradient(90deg, $color1 0%, $color2 50%, $color1 100%);
		background-size: 200%;
		animation: ghostGradientAnimation 0.8s infinite ease-out;
		transition: all 1s ease-in;
		border-radius: 4px;
	}
}

@mixin clickable() {
	cursor: pointer;
	user-select: none;
	pointer-events: all;
}

@mixin non-clickable() {
	cursor: not-allowed;
	user-select: none;
}

@mixin ellipsis($lines: null) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	@if $lines {
		@supports (display: -webkit-box) and (-webkit-line-clamp: $lines) and (-webkit-box-orient: vertical) {
			white-space: normal;
			/* stylelint-disable value-no-vendor-prefix */
			display: -webkit-box;
			-webkit-line-clamp: $lines;
			-webkit-box-orient: vertical;
		}
	}
}

@mixin reset-button-style {
	border: 0;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;

	background: transparent;

	/* inherit font & color from ancestor */
	color: inherit;
	font: inherit;

	/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
	line-height: normal;

	/* Corrects font smoothing for webkit */
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;

	/* Corrects inability to style clickable `input` types in iOS */
	appearance: none;
	outline: none;

	&::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
}

@mixin custom-scrollbar($color) {
	@if (kv-color($color, 'base')) {
		&::-webkit-scrollbar {
			width: 15px;
			height: 15px;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background-color: kv-color($color, 'base');
			border: 4px solid transparent;
			background-clip: content-box;
		}

		&::-webkit-scrollbar-corner {
			background-color: transparent;
		}
	}
}

@mixin kelvin-light-scrollbar {
	@include custom-scrollbar('neutral-3');
}

@mixin kelvin-night-scrollbar {
	@include custom-scrollbar('neutral-6');
}

@mixin rotate-border-animation($border-radius: $spacing-2x, $border-width: 2px, $inset: 0) {
	position: relative;

	&::before {
		--rotation: 0deg;

		content: ' ';
		position: absolute;
		inset: $inset;
		z-index: 99;
		border: $border-width solid transparent;
		border-radius: $border-radius;
		background-image: conic-gradient(
			from var(--rotation),
			kv-color('secondary-5'),
			kv-color('secondary-2'),
			kv-color('secondary-5')
		);
		background-origin: border-box;
		mask: linear-gradient(#000, #000), linear-gradient(#000, #000);
		mask-clip: content-box, border-box;
		mask-composite: exclude;
		animation: rotate-border 1.5s infinite linear;
	}
}

@property --rotation {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}


@keyframes rotate-border {
	to {
		--rotation: 360deg;
	}
}