.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
	}

	&NoFinger {
		cursor: none
	}
}

.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);
	}

	&XSmall {
		/*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: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px 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);
		}

		&XSmall {
			/*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: inset 3px 3px 6px rgba($dark-shadow, .5), inset -3px -3px 6px 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);
		}

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

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

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

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

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

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

	&Input {
		box-shadow: inset 2px 2px 4px rgba($dark-shadow, .5),inset -2px -2px 4px rgba($light-shadow, .5) !important;
		background: $background !important;
		border: none !important;

		&:focus {
			border: none !important;
		}
	}

	&Select > select {
		box-shadow: inset 2px 2px 4px rgba($dark-shadow, .5),inset -2px -2px 4px rgba($light-shadow, .5) !important;
		background: $background !important;
		border: none !important;

		&:focus {
			border: none !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
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fullwidth {
	width: 100%
}
