@use "sass:math";

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

@function clampFn($min-rem, $max-rem) {
  $rem-base : 10;   // 1rem = 10px  (html font-size: 62.5%)
  $min-vp   : 360;  // min viewport in px
  $max-vp   : 1067; // max viewport in px

  // Strip units to work with raw numbers
  $min-px : math.div($min-rem, $min-rem * 0 + 1) * $rem-base;
  $max-px : math.div($max-rem, $max-rem * 0 + 1) * $rem-base;

  // Linear interpolation between the two viewport widths
  $slope     : math.div($max-px - $min-px, $max-vp - $min-vp);
  $intercept : math.div($min-px - ($slope * $min-vp), $rem-base) * 1rem;

  @return clamp(#{$min-rem}, #{$intercept} + #{$slope * 100}vw, #{$max-rem});
}


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

@mixin bitSize($type:'bit', $size:'md', $hasHeight:false) {

	@if $type == 'bit' and $size == 'sm' {
		padding: $sp-1 $sp-4;
		font-size: $font-size-small;
		@if $hasHeight { height: $btn-input-size-sm; }
	}
	@if $type == 'ico' and $size == 'sm' {
		padding: 0;
		height: $btn-input-size-sm;
		width: $btn-input-size-sm;
		min-width: $btn-input-size-sm;
	}

	@if $type == 'bit' and $size == 'md' {
		padding: $sp-2 $sp-4;
		font-size: $font-size-base;
		line-height: $line-height-base;
		@if $hasHeight { height: $btn-input-size-md; }
	}
	@if $type == 'ico' and $size == 'md' {
		padding: 0;
		height: $btn-input-size-md;
		width: $btn-input-size-md;
		min-width: $btn-input-size-md;
	}

	@if $type == 'bit' and $size == 'lg' {
		padding: $sp-3 $sp-5;
		font-size: $font-size-large;
		@if $hasHeight { height: $btn-input-size-lg; }
	}
	@if $type == 'ico' and $size == 'lg' {
		height: $btn-input-size-lg;
		width: $btn-input-size-lg;
		min-width: $btn-input-size-lg;
	}
}

@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: rgba($co-base-0,.3) rgba($co-base-0,.25);

	&::-webkit-scrollbar {
		height: $sp-2;
		width: $sp-2;
		background-color:  rgba($co-base-0,.25);
	}

	&::-webkit-scrollbar-thumb {
		background-color:  rgba($co-base-0,.3);
	}
}

@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;
			}
		}
	}
}