@use 'sass:color';
@use './themes';
@use './typography';
@use './variables';

@mixin shiny($color: 'primary', $radius: variables.$radius) {
	position: relative;
	border-radius: $radius;
	box-shadow: variables.$shadow;
	isolation: isolate;

	&::before {
		position: absolute;
		z-index: -1;
		border-radius: calc($radius - 1px);
		content: '';
		inset: 1px;
		pointer-events: none;
	}

	@if $color == 'primary' {
		background-image: linear-gradient(
			color.adjust(variables.$blue, $lightness: 10%),
			color.adjust(variables.$blue, $lightness: 5%)
		);

		&::before {
			background-image: linear-gradient(
				color.adjust(variables.$blue, $lightness: 3%),
				color.adjust(variables.$blue, $lightness: -1%)
			);
		}

		&:hover::before {
			background-image: linear-gradient(
				color.adjust(variables.$blue, $lightness: 1%),
				color.adjust(variables.$blue, $lightness: -1%)
			);
		}
	}

	@if $color == 'secondary' {
		@include themes.light {
			background-image: linear-gradient(variables.$bg-3, variables.$bg-4);

			&::before {
				background-color: variables.$bg-2;
			}

			&:hover::before {
				background-color: variables.$bg-1;
			}
		}

		@include themes.dark {
			background-image: linear-gradient(#2f2f2f, variables.$bg-4);

			&::before {
				background-image: linear-gradient(variables.$bg-3, variables.$bg-2);
			}

			&:hover::before {
				background: variables.$bg-2;
			}
		}
	}
}

@mixin box($hover: false) {
	border: 1px solid variables.$bg-4;
	border-radius: variables.$radius;
	background-color: variables.$bg-2;

	@if $hover {
		@include themes.light {
			&:hover {
				border-color: rgba(black, 20%);
			}
		}

		@include themes.dark {
			&:hover {
				border-color: rgba(white, 15%);
			}
		}
	}
}

@mixin link() {
	@include typography.bold;

	color: variables.$light-blue;

	&:hover {
		filter: brightness(130%);
	}
}

@mixin skeleton($width: 100%, $height: 100%) {
	position: relative;
	overflow: hidden;
	width: $width;
	height: $height;
	flex: 0 0 auto;
	border-radius: variables.$radius;
	background-color: variables.$bg-3;

	&::before {
		position: absolute;
		width: max(50%, 2rem);
		animation: skeleton 0.8s ease-in-out infinite;
		background-image: linear-gradient(to right, transparent, rgba(white, 0.05), transparent);
		content: '';
		inset: 0 auto;

		@keyframes skeleton {
			from {
				right: 100%;
			}

			to {
				right: min(-50%, -2rem);
			}
		}
	}
}

@mixin blurred-background() {
	position: fixed;
	z-index: 998;
	-webkit-backdrop-filter: blur(0.1rem);
	backdrop-filter: blur(0.1rem);
	background-color: rgba(black, 0.2);
	inset: 0;
}

@mixin item-list() {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.5rem;

	&:not(.active) {
		filter: saturate(0);
		opacity: 0.5;
	}

	&::before {
		position: absolute;
		z-index: -1;
		border-radius: variables.$radius;
		background-color: variables.$bg-2;
		content: '';
		inset: -0.25rem -0.5rem;
		opacity: 0;
	}

	&:hover::before {
		opacity: 1;
	}
}

@mixin broken-img() {
	position: relative;

	&::before {
		position: absolute;
		background: variables.$bg-4;
		content: '';
		inset: 0;
	}
}
