.isHidden {
	display: none;

	&Mobile {
		@include MediaQuery(phone) {
			display: none
		}
	}
}

.petiteCaps {
	font-variant: petite-caps
}

.flexCenter {
	display: flex;
	align-content: center;
	align-items: center
}

.no {
	&BottomMargin {
		margin-bottom: 0 !important;
	}
}

.is {
	&NoWrap {
		white-space: nowrap
	}

	&Finger {
		cursor: pointer
	}
}

.neomorph {
	/*box-shadow: 0px 0px 4px 4px rgba($background, 1), -8px -8px 16px rgba($light-shadow, 1), 8px 8px 16px rgba($dark-shadow, 1);*/
	box-shadow: -8px -8px 16px rgba($light-shadow, .5), 8px 8px 16px rgba($dark-shadow, .5);

	&Small {
		/*box-shadow: 0px 0px 3px 3px rgba($background, 1), -6px -6px 12px rgba($light-shadow, 1), 6px 6px 12px rgba($dark-shadow, 1);*/
		box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5);
	}

	&Bottom {
		filter: drop-shadow(8px 8px 14px rgba($dark-shadow, 1));
	}

	&Inset {
		box-shadow: inset 8px 8px 16px rgba($dark-shadow, .5), inset -8px -8px 16px rgba($light-shadow, .5);

		&Small {
			box-shadow: inset 6px 6px 12px rgba($dark-shadow, .5), inset -6px -6px 12px rgba($light-shadow, .5);
		}
	}
}

.neo {
	&Btn {
		box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
		background: none !important;
		border: none !important;
		transition: all .2s linear;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;

		&:focus {
			box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5) !important;
		}

		&:hover {
			box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5);
			background: none !important;
			border: none !important;
			transform: scale(1.1);
		}
	}

	&File {
		box-shadow: 0px 0px 0px rgba($light-shadow, .5), 0px 0px 0px rgba($dark-shadow, .5) !important;
		transition: all .2s linear;
		-webkit-backface-visibility: hidden !important;
		backface-visibility: hidden !important;
		background: $background !important;

		&:hover {
			box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5) !important;
		}

		&.isSelected {
			box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5) !important;
		}

		&.is-active, &.active {
			box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5) !important;
			color: $color-black !important;
		}
	}
}

.gradientBackground {
	background: linear-gradient(to right bottom,$background-light,$background-dark)
}

.borderR {
	border-radius: $border-radius;

	&Small {
		border-radius: $border-radius-s !important;
	}

	&Big {
		border-radius: $border-radius-b;
	}
}

.bg {
	background: $background
}

.sameMarginBottom {
	margin-bottom: 1rem !important
}