@function actionDarken($color, $amount:5%) {
	@return darken($color, $amount);
}
@function actionLighten($color, $amount:5%) {
	@return lighten($color, $amount);
}
@function headerVisibleHeight($dist:0) {
	@return calc(var(--header-height) + #{$sp-7 + $dist});
}

@mixin hover($extra: "") {
	@if $extra == "" {
		&:hover,
		&:focus {
			@content;
		}
	}
	@else {
		&:hover,
		&:focus,
		&#{$extra} {
			@content;
		}
	}
}

@mixin bitSize($type:'bit', $size:'md') {
	@if $type == 'bit' and $size == 'md' {
		padding: .9rem $sp-4 .7rem; // 4rem
		font-size: $font-size-base;
		line-height: $line-height-base;
	}
	@if $type == 'ico' and $size == 'md' {
		width: 4rem;
		height: 4rem;
		min-width: 4rem;
	}

	@if $type == 'bit' and $size == 'sm' {
		padding: .5rem $sp-3 .3rem;
		font-size: $font-size-small;
	}
	@if $type == 'ico' and $size == 'sm' {
		width: 2.9rem;
		height: 2.9rem;
		min-width: 2.9rem;
	}

	@if $type == 'bit' and $size == 'lg' {
		padding: 1rem $sp-5 .8rem;
		font-size: $font-size-large;
	}
	@if $type == 'ico' and $size == 'lg' {
		width: 5rem;
		height: 5rem;
		min-width: 5rem;
	}
}

@mixin inputAutocomplete($bg, $bd) {
	&:-webkit-autofill,
	&:-webkit-autofill:hover,
	&:-webkit-autofill:focus {
		-webkit-box-shadow: 0 0 0px 1000px $bg inset;
		border: 1px solid $bd;
		// -webkit-text-fill-color: green;
		// transition: background-color 5000s ease-in-out 0s;
	}
}

@mixin scrollBar() {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--co-theme-0) 30%, transparent) color-mix(in srgb, var(--co-theme-0) 25%, transparent);

	&::-webkit-scrollbar {
		height: $sp-2;
		width: $sp-2;
		background-color: color-mix(in srgb, var(--co-theme-0) 25%, transparent);
	}

	&::-webkit-scrollbar-thumb {
		background-color: color-mix(in srgb, var(--co-theme-0) 30%, transparent);
	}
}

@mixin imageZoomEndEffect {
	transform: scale3d(1.2,1.2,1);
	transition: transform 1.3s ease-in;
}

@mixin mediaQ($break, $map: $break-map-all) {
	@each $name, $size in $map {
		@if $break == $name {
			@media (min-width: $size) {
				@content;
			}
		}
		@if $break == '#{$name}Max' {
			@media (max-width: ($size - 1)) {
				@content;
			}
		}

		@if $break == 'bp' and $name == $break-navbar {
			@media (min-width: $size) {
				@content;
			}
		}
		@if $break == 'bpMax' and $name == $break-navbar {
			@media (max-width: ($size - 1)) {
				@content;
			}
		}
	}
}