@use 'sass:math';
@use './variables' as vars;

@mixin defineVar($name, $lightColor, $darkColor) {
	:root {
		#{$name}: #{$lightColor};

		.dark-theme {
			#{$name}: #{$darkColor}
		}
	}
}

@mixin scrollbar($width: 0.5em) {
	overflow: auto;
	overflow: overlay; // for Chrome
	scrollbar-width: thin; // FF
	scrollbar-color: var(--select-options-scrollbar-color) transparent; // FF


	/* Chrome */
	&::-webkit-scrollbar {
		width: $width;
	}

	&::-webkit-scrollbar-thumb {
		background-color: var(--select-options-scrollbar-color);
	}
	&::-webkit-scrollbar-track {
		background-color: transparent;
	}
}

@mixin hor-scrollbar() {
	overflow: auto;
	overflow: overlay; // for Chrome
	scrollbar-width: thin; // FF
	scrollbar-color: var(--select-options-scrollbar-color) transparent; // FF


	/* Chrome */
	&::-webkit-scrollbar {
		height: 0.25em;
	}

	&::-webkit-scrollbar-thumb {
		background-color: var(--select-options-scrollbar-color);
	}
	&::-webkit-scrollbar-track {
		background-color: transparent;
	}
}

@mixin tablet-low() {
	@media (min-width: vars.$gm-bp-low-tablet-down) {
		@content;
	}
}
@mixin tablet-low-up() {
  @media (max-width: vars.$gm-bp-low-tablet-up) {
    @content;
  }
}

@mixin tablet() {
	@media (min-width: vars.$gm-bp-tablet-down) {
		@content;
	}
}

@mixin tablet-large() {
	@media (min-width: vars.$gm-bp-landscape-tablet-down) {
		@content;
	}
}

@mixin desktop() {
	@media (min-width: vars.$gm-bp-desktop-down) {
		@content;
	}
}

@mixin desktop-large() {
	@media (min-width: vars.$gm-bp-large-desktop-down) {
		@content;
	}
}

@mixin text-14() {
	font-weight: 400 !important;
	font-size: 14px;
	line-height: 17px;
}

@mixin text-15() {
	font-weight: 500 !important;
	font-size: 15px;
	line-height: 18px;
}

@mixin text-16() {
	font-weight: 500 !important;
	font-size: 16px;
	line-height: 20px;
}

@mixin text-18() {
	font-weight: 500 !important;
	font-size: 18px;
	line-height: 20px;
}


@mixin text-20() {
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
}

@mixin text-22() {
	font-weight: 500;
	font-size: 22px;
	line-height: 28px;
}

@mixin image-size($size) {
	width: $size;
	height: $size;
	line-height: $size;
	font-size: $size;
}

@mixin gap($size) {
	$halfSize: math.div($size, 2);
	margin: -$halfSize !important;
	> * {
		margin: $halfSize !important;
		width: auto !important;
	}
}

@mixin maxWidthView() {
	max-width: calc(100vw - 24px);
	@include tablet-low {
		max-width: calc(100vw - 48px);
	}
}

@mixin setButtonColors($color, $colorBg, $colorIcon, $colorBorder: null) {
  background: $colorBg;
  color: $color;
  @if ($colorBorder != null) {
    border: 1px solid $colorBorder;
  }
  .gm-icon {
    color: $colorIcon;
  }
}