.x-messages {
	background-color: var(--gray-200);
	border: var(--default-border-width) solid var(--gray-500);
	border-radius: var(--default-border-radius);
	color: var(--gray-600);
	font-size: 0.875rem;
	margin-bottom: var(--default-spacing-unit);
	padding: 0.875em 1.25em;
	text-align: center;
}

.x-messages *:last-child {
	margin-bottom: 0;
}

.x-messages--borderless {
	border: 0 none;
}

.x-messages--error {
	background-color: var(--red-100);
	border-color: var(--red-400--shaded);
}

.x-messages--info {
	background-color: var(--blue-100);
	border-color: var(--blue-400--shaded);
}

.x-messages--success {
	background-color: var(--green-100);
	border-color: var(--green-400--shaded);
}

.x-messages--warning {
	background-color: var(--yellow-100);
	border-color: var(--yellow-400--shaded);
}
.x-messages--with-icon {
	align-items: center;
	display: flex;
	gap: 1.25em;
	margin: 0 auto var(--default-spacing-unit);
	width: fit-content;
}

.x-messages__text {
	flex-grow: 1;
}

.x-messages__icon {
	font-size: 2em;
}

.x-messages--with-icon .x-messages__icon {
	flex-grow: 0;
	flex-shrink: 1;
}

.x-messages__close {
	line-height: 1;
	margin-top: -1rem;
	position: absolute;
	right: 0.25rem;
	text-decoration: none;
	top: 50%;
}

/* GD Chaser Extension */

#js-chaser {
	background-color: rgba(255, 255, 255, 0.75);
	border: var(--default-border-width) solid var(--gray-600);
	border-radius: var(--default-border-width);
	bottom: 6rem;
	color: var(--gray-600);
	cursor: pointer;
	display: block;
	opacity: 0;
	position: fixed;
	right: 2rem;
	text-align: center;
	transition: opacity 0.3s;
	z-index: 200;
}

#js-chaser.__active {
	opacity: 1;
}

#js-chaser span {
	color: var(--gray-600);
	display: inline-block;
	font-size: 1rem;
	height: 3.5rem;
	line-height: 3.0rem;
	position: relative;
	transition: line-height 0.3s ease-in;
	vertical-align: middle;
	width: 3.5rem;
}

#js-chaser span::after {
	bottom: 4px;
	color: var(--gray-600);
	content: "TOP";
	font-family: sans-serif;
	font-size: 11px;
	left: 0;
	line-height: 1.0rem;
	position: absolute;
	text-align: center;
	width: 3.5rem;
}

.x-hover--allowed #js-chaser:hover {
	border-color: var(--gray-500);
	color: var(--gray-500);
}

.x-hover--allowed #js-chaser span:hover {
	color: var(--gray-500);
	line-height: 1.0rem;
}