.neomorph {
	box-shadow: -8px -8px 16px var(--light-shadow), 8px 8px 16px var(--dark-shadow);

	&Small {
		box-shadow: -6px -6px 12px var(--light-shadow), 6px 6px 12px var(--dark-shadow);
	}

	&XSmall {
		box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
	}

	&XXSmall {
		box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
	}

	&Bottom {
		filter: drop-shadow(8px 8px 14px var(--primary-color-dark));
	}

	&Inset {
		box-shadow: inset 8px 8px 16px var(--dark-shadow), inset -8px -8px 16px var(--light-shadow);

		&Small {
			box-shadow: inset 6px 6px 12px var(--dark-shadow), inset -6px -6px 12px var(--light-shadow);
		}

		&XSmall {
			box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
		}

		&XXSmall {
			box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
		}
	}
}

.neo {
	&Btn {
		background: linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));
		box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
		border: none !important;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;

		&:focus {
			box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
			border: none !important;
		}

		&InsetPlain {
			background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
			box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
			border: none !important;

			&:focus {
				box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
				border: none !important;
			}
		}

		&Small {
			background: linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));
			box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
			border: none !important;


			&:focus {
				box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
				border: none !important;

				&:not(:active) {
					box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
				}
			}

			&InsetPlain {
				background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
				box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
				border: none !important;

				&:focus {
					box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
					border: none !important;
				}
			}

			&XInsetPlain {
				background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
				box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
				border: none !important;

				&:focus {
					box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow) !important;
					border: none !important;
				}
			}

			&Plain {
				box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
				border: none !important;

				&:focus {
					box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
					border: none !important;
				}
			}
		}
	}

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

		@include MediaQuery(phone) {
			box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
			background: var(--primary-color) !important;
		}

		&:hover {
			box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
		}

		&.isSelected {
			background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
			box-shadow: inset 3px 3px 6px var(--dark-shadow),inset -3px -3px 6px var(--light-shadow) !important;
		}

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

	&Input {
		box-shadow: inset 2px 2px 4px var(--dark-shadow),inset -2px -2px 4px var(--light-shadow) !important;
		background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
		border: none !important;

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

	&Select > select {
		box-shadow: inset 2px 2px 4px var(--dark-shadow),inset -2px -2px 4px var(--light-shadow) !important;
		background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light)) !important;
		border: none !important;

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