@import '../globals/variables';


@mixin respond-above($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		$breakpoint-value: map-get($breakpoints, $breakpoint);

		@media (min-width: $breakpoint-value) {
			@content;
		}
	} @else {
		@media (min-width: $breakpoint) {
      @content;
    }
	}
}

@mixin customScrollbar {
	&::-webkit-scrollbar {
	  width: 5px;
	  height: 6px;
	}

	&::-webkit-scrollbar-track {
	  background: #fff;
	  border-radius: 0;
	  box-shadow: inset 0 5px 5px 0 rgba(193, 205, 205, 0.28);
	}

	&::-webkit-scrollbar-thumb {
	  border-radius: 0;
	  background: $primary;
	}
}


@mixin endGameText {
	font-weight: bold;
	color: $primary;
	letter-spacing: 1.5px;
	text-transform: uppercase;

	&--lg {
		font-weight: 900;
		font-size: 47px;

		@include respond-above(sm) {
			font-size: 65px;
		}

		@include respond-above(lg) {
			font-size: 80px;
		}
	}

	&--sm {
		font-size: 20px;

		@include respond-above(lg) {
			font-size: 32px;
		}

		@include respond-above(hg) {
			font-size: 40px;
		}
	}
  }