.asl_r.asl_r.asl_r.asl_r.asl_r.asl_r.asl_r.asl_r.asl_r {
	background: var(--bg, var(--color-bg-1));
	color: var(--fg, var(--color-fg-1));
	border-radius: var(--radius-lg);
	border: solid 1px var(--border, var(--color-border));
	box-shadow: none;

	margin-top: calc(4 * var(--sp));
	padding: 0;

	animation-timing-function: var(--ease-out);
	animation-duration: 0.5s !important;

	--lenis: prevent;

	&.asl_an_fadeInDrop {
		animation-name: search-panel-drop-in;
	}
	&.asl_an_fadeOutDrop {
		animation-name: search-panel-drop-out;
	}

	& .resdrg {
		overflow-y: clip;
		display: flex;
		flex-direction: column;
	}

	& .results {
		& .item {
			padding: 0;
			padding-inline: calc(4 * var(--sp));
			padding-block: calc(4 * var(--sp));
			border: none;
			border-bottom: solid 1px var(--color-border);
			margin-bottom: -1px;
			background: transparent;

			&::after {
				display: none;
			}

			& .asl_content {
				padding: 0;

				& .asl_image {
					margin: 0;
					margin-right: calc(4 * var(--sp));
					margin-bottom: calc(4 * var(--sp));
					border-radius: var(--radius);
				}

				& h3 {
					&,
					& a {
						color: currentColor;
						font-size: var(--text-base);
						font-family: var(--font-mono) !important;
						font-weight: 500;
						text-transform: uppercase;
					}
				}

				& .etc {
					&:not(:has(*)) {
						display: none;
					}
				}

				& .asl_desc {
					font-size: var(--text-base);
					line-height: 1.2;
					color: var(--color-fg-2);
					margin-top: calc(2 * var(--sp));

					&:not(:has(*)) {
						display: none;
					}
				}
			}
		}
	}
}

@keyframes search-panel-drop-in {
	from {
		translate: 0 calc(4 * var(--sp));
		opacity: 0;
		filter: blur(4px);
	}
}

@keyframes search-panel-drop-out {
	to {
		translate: 0 calc(4 * var(--sp));
		opacity: 0;
		filter: blur(4px);
	}
}