5etools-mirror-2.github.io/scss/search.scss

@import "includes/vars";

.pg-search__ {
	$sz-image: 48px;

	&ipt {
		border-right: 0;
	}

	&wrp-result {
		border: 1px solid $rgb-border-grey;
		border-radius: 5px;
		min-height: calc(#{$spacer} + #{$sz-image} + 2px);
	}

	&disp-token {
		width: $sz-image;
		height: $sz-image;
		align-self: center;
	}

	&disp-srd {
		font-size: 8.5px;
		vertical-align: super;
		top: 2px;
		margin-left: 3px;
	}

	&wrp-preview {
		width: 500px;
		border: 1px solid $rgb-border-grey;
	}

	&btn-toggle-preview {
		&--expanded {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;

			@media only screen and (max-width: $width-screen-sm) {
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			}
		}
	}
}

.night-mode {
	.pg-search__ {
		&wrp-result {
			border: 1px solid $rgb-border-grey--night;
			background: $rgb-bg--night;
		}

		&wrp-preview {
			border: 1px solid $rgb-border-grey--night;
		}
	}
}

.style-switch__wide {
	.pg-search__ {
		&wrp-preview {
			width: 50vw;
		}
	}
}