@use 'kv-functions-color' as *;
@use 'kv-spacing' as *;

@mixin ghost-animation($color) {
	$color-faded: color-mix(in srgb, $color 30%, transparent);

	background: linear-gradient(90deg, $color-faded 0%, $color 50%, $color-faded 100%);
	background-size: 200%;
	animation: ghostGradientAnimation 0.8s infinite ease-out;
	border-radius: 4px;

	@keyframes ghostGradientAnimation {
		0% {
			background-position: -100% 0;
		}

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

@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 ($color) {
		&::-webkit-scrollbar {
			width: 15px;
			height: 15px;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background-color: $color;
			border: 4px solid transparent;
			background-clip: content-box;
		}

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

@mixin kelvin-scrollbar {
	@include custom-scrollbar(var(--scrollbar-thumb-default));
}

@mixin rotate-border-animation(
	$border-radius: var(--radius-md),
	$border-width: 2px,
	$color1: var(--color-teal-400),
	$color2: var(--color-brand-800),
	$color3: var(--color-teal-400),
	$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), $color1, $color2, $color3);
		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;
	}
}

@mixin kelvin-vertical-divider($color: var(--border-surface-neutral-default)) {
	content: '';
	display: flex;
	flex: 1;
	width: 1px;
	background: $color;
}

@mixin kelvin-horizontal-divider($color: var(--border-surface-neutral-default)) {
	content: '';
	display: flex;
	flex: 1;
	height: 1px;
	background: $color;
}