new-templane/resources/sass/base/_mixins.scss

// MEDIA
@mixin media-max ($size) {
  @media only screen and (max-width: #{$size}px) {
    @content
  }
}

@mixin media-min ($size) {
  @media only screen and (min-width: #{$size}px) {
    @content
  }
}


@mixin media-min-h ($size) {
  @media screen and (min-height: #{$size}px) {
    @content
  }
}

@mixin media-max-h ($size) {
  @media screen and (max-height: #{$size}px) {
    @content
  }
}


@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

@mixin flex($justify: null, $align: null, $flow: null, $gap: null) {
	display: flex;
	@if $justify {
		justify-content: $justify;
	}
	@if $align {
		align-items: $align;
	}
	@if $flow {
		flex-flow: $flow;
	}
	@if $gap {
		gap: $gap;
	}
}

@mixin absolute($left: null, $top: null, $right: null, $bottom: null) {
	position: absolute;
	@if $left {
		left: $left;
	}
	@if $top {
		top: $top;
	}
	@if $right {
		right: $right;
	}
	@if $bottom {
		bottom: $bottom;
	}
}

@mixin desktop { @media (min-width: 1200px) { @content; } }
@mixin tablet { @media (max-width: 1199px) { @content; } }
@mixin mobile{ @media (max-width: 768px) { @content; } }
@mixin mobile-sm{ @media (max-width: 575px) { @content; } }

@mixin fz($size) {
	@if $size == l {
		font-size: var(--l);
	}
	@if $size == m {
		font-size: var(--m);
	}
	@if $size == s {
		font-size: var(--s);
	}
}

@mixin ai($width, $height) {
	&:after {
		content:'';
		display: block;
		padding-bottom: calc($height/$width*100%);
	}
}

@mixin effectBox{
		border-radius: var(--border-radius-main);
		border: 1px solid rgba(120, 88, 173, 0.20);
		background: rgba(147, 122, 189, 0.10);
		backdrop-filter: blur(32px);
		overflow:hidden;
		position:relative;
		&:before{
			content:'';
			width: 335px;
			height: 141px;
			position: absolute;
			right: -25px;
			top: -146px;
			border-radius: 335px;
			background: radial-gradient(178.52% 78.07% at 41.32% 26.64%, #EBBFFB 0%, #C570E3 85%);
			filter: blur(60px);
			transition: 0.3s ease-out;
		}
		&:after{
			content:'';
			width: 273px;
			height: 136px;
			position: absolute;
			left: 0;
			top: -110px;
			background:#937ABD;
			filter: blur(60px);
			border-radius: 335px;
			visibility: hidden;
			opacity: 0;
			transition: 0.6s ease-out;
			background: radial-gradient(178.52% 78.07% at 41.32% 26.64%, #EBBFFB 0%, #937ABD 85%);

		}
		&:hover{
			&:before{
				opacity:0;
			}
			&:after{
				content:'';
				left: -69px;
				top: -75px;
				opacity: 0.8;
				visibility: visible;
			}
		}

}

@mixin styleScrollH{
	&::-webkit-scrollbar {
		height: 3px;
	}

	&::-webkit-scrollbar-track {
		background:transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: rgba(177, 163, 199, 0.5);
		border-radius:15px;
		background:transparent;
	}
}

@mixin styleScrollV{
	&::-webkit-scrollbar {
		width: 3px;
	}

	&::-webkit-scrollbar-track {
		background:transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: rgba(177, 163, 199, 0.5);
		border-radius:15px;
	}
}