/* @tailwind base;
@tailwind components;
@tailwind utilities;

.a {
  justify-content: center;
  align-items: center;
} */
@import './var.scss';

html {
	scroll-behavior: smooth;
	/* // filter: grayscale(1); */
}

.kaomojiContainer {
	width: calc(100% - 2rem);
	max-width: 30rem;
	max-height: 20rem;
	overflow: auto;
}

body {
	background-color: #fff;
	margin: 0px;
	scroll-behavior: smooth;
}

button {
	outline: none;
	border-radius: unset;
	border: none;
	padding: none;
	background: none;
	cursor: pointer;
	color: unset;
}

input {
	background-color: unset;
	outline: unset;
	border: unset;
	color: unset;
}

input[type='text']::placeholder {
	color: #bfbfbf;
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
	color: gray;
	text-decoration: none;
}

a:active {
	color: unset;
}

code {
	font-family: 'Consolas', 'Courier New', monospace;
	/* // opacity: .8; */
	backdrop-filter: blur(20px);
	border-radius: 1rem;
}

.ant-message-notice-content {
	backdrop-filter: blur(20px);
	background: #ffffff00 !important;
}

.bg-blur {
	backdrop-filter: blur(20px);
}

/* // .ant-popover-inner { */
/* //   background: #ffffff00 !important; */
/* // } */
.ant-tour {
	max-width: calc(100vw - 2rem);
}

.ant-drawer-content {
	/* // background: #ffffff00 !important; */
	backdrop-filter: blur(20px);
}

.upload-list-inline .ant-upload-list-item {
	float: left;
	width: 200px;
	margin-inline-end: 8px;
}

#tabBarDrawer,
#tabPopover {
	.MuiPaper-root {
		border: none;
		/* // width: 10rem; */
		overflow: unset;
		background: transparent;
		box-shadow: none;
	}
}

#simple-popover {
	.MuiPaper-root {
		background-color: rgba(143, 151, 163, 0.25);
		backdrop-filter: blur(10px);
	}
}

.MuiDialog-container {
	.MuiPaper-root {
		width: unset;
		background: #ffffffee;
		backdrop-filter: blur(10px);
		box-shadow: unset;
	}
}

.ant-tabs-dropdown-menu {
	background: #00000000 !important;
	backdrop-filter: blur(20px);
}

.GroundGlass,
.ant-notification-notice-wrapper {
	background: #ffffff00 !important;
	/* // opacity: 0; */
	backdrop-filter: blur(20px) !important;
}

.ant-drawer-content-wrapper {
	backdrop-filter: blur(20px);
}

@keyframes wobble-hor-bottom {
	0% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(10px) rotate(6deg);
	}

	30% {
		transform: translateX(-5px) rotate(-6deg);
	}

	45% {
		transform: translateX(5px) rotate(3.6deg);
	}

	60% {
		transform: translateX(-3px) rotate(-2.4deg);
	}

	75% {
		transform: translateX(2px) rotate(1.2deg);
	}

	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}
}

@keyframes vibrate {
	0% {
		transform: translate(0);
	}

	20% {
		transform: translate(10px, -10px);
	}

	40% {
		transform: translate(10px, 10px);
	}

	60% {
		transform: translate(-10px, 10px);
	}

	80% {
		transform: translate(-10px, -10px);
	}

	100% {
		transform: translate(0);
	}
}

@keyframes slide-bl {
	0% {
		transform: translateY(0) translateX(0) rotate(135deg);
	}

	100% {
		transform: translateY(100px) translateX(-100px) rotate(135deg);
	}
}

/* 左下进入页面 */
@keyframes slide-out-tr {
	0% {
		transform: translateY(0) translateX(0) rotate(26deg);
		opacity: 1;
	}

	100% {
		transform: translateY(-100vh) translateX(50vh) rotate(26deg);
		opacity: 1;
	}
}

/* 右上进入页面 */
@keyframes slide-out-bl {
	0% {
		transform: translateY(0) translateX(0) rotate(26deg);
		opacity: 1;
	}

	100% {
		transform: translateY(100vh) translateX(-50vh) rotate(26deg);
		opacity: 1;
	}
}

/* // 抖动提示 */
@keyframes vibrate-fast {
	0% {
		transform: translate(0);
	}

	10% {
		transform: translate(-2px, -2px);
	}

	20% {
		transform: translate(2px, -2px);
	}

	30% {
		transform: translate(-2px, 2px);
	}

	40% {
		transform: translate(2px, 2px);
	}

	50% {
		transform: translate(-2px, -2px);
	}

	60% {
		transform: translate(2px, -2px);
	}

	70% {
		transform: translate(-2px, 2px);
	}

	80% {
		transform: translate(-2px, -2px);
	}

	90% {
		transform: translate(2px, -2px);
	}

	100% {
		transform: translate(0);
	}
}

/* // 外围闪动 */
@keyframes shadow-drop-center {
	0% {
		/* // box-shadow: 0 0 0 0 #ffffff; */
	}

	100% {
		box-shadow: 0 0 0 3px #0061ff, 0 0 0 6px #ff1b6b, 0 0 0 9px #bf0fff,
			0 0 0 12px #ff930f;
	}
}

/* // 弹跳缩放 */
@keyframes scale-in-center {
	0% {
		transform: scale(1);
	}

	80% {
		transform: scale(1.4);
	}

	100% {
		transform: scale(1.3);
	}
}

/* // 边框弹跳（阴影） */
@keyframes shadow-scale-in-center {
	0% {
		box-shadow: 0 0 0 0px #32323250;
	}

	80% {
		box-shadow: 0 0 0 5px #32323250;
	}

	100% {
		box-shadow: 0 0 0 3px #32323250;
	}
}

@keyframes border-scale-in-center {
	0% {
		padding: 0px;
		right: 0px;
	}

	80% {
		padding: 5px;
		right: 5px;
	}

	100% {
		padding: 4px;
		right: 4px;
	}
}

@keyframes TieShanKao {
	0% {
		transform: skew(-5deg, 0) scale(1, 1);
	}

	25% {
		transform: skew(-20deg, -5deg) scale(1, 1.1);
	}

	50% {
		transform: skew(-5deg, 0) scale(1, 1);
	}

	75% {
		transform: skew(-20deg, 0) scale(1.1, 0.9);
	}

	100% {
		transform: skew(-5deg, 0) scale(1, 1);
	}
}

@keyframes scale-up-center {
	0% {
		transform: scale(0.8);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes rotate-center {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes flip-vertical {
	0% {
		transform: rotateY(0deg);
	}

	50% {
		transform: rotateY(60deg);
	}

	100% {
		transform: rotateY(0deg);
	}
}

@keyframes bounce-top {
	0% {
		transform: translateY(0);
	}

	25% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-24px);
	}

	55% {
		transform: translateY(0);
	}

	65% {
		transform: translateY(-12px);
	}

	75% {
		transform: translateY(0);
	}

	82% {
		transform: translateY(-6px);
	}

	87% {
		transform: translateY(0);
	}

	93% {
		transform: translateY(-4px);
	}

	100% {
		transform: translateY(0);
	}
}
/* 虚化出现 */
@keyframes focus-in-contract {
	0% {
		letter-spacing: 1em;
		filter: blur(12px);
		opacity: 0;
	}
	100% {
		filter: blur(0);
		opacity: 1;
	}
}