/* Outdated DS detected - display warning and refresh */

.ds-possibly-outdated {
	left: 60px;
	bottom: 100px;
	position: fixed;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
	border-radius: var(--border-radius-medium);
	box-sizing: border-box;
	min-width: 150px;
	max-width: 420px;
	min-height: 54px;
	font-family: var(--font-family);
	font-size: var(--font-size-body-medium);
	font-weight: var(--font-weight-body-medium);
	line-height: var(--line-height-body-medium);
	color: var(--color-on-layer-primary);
	background-color: var(--color-layer-level-0);

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 6px;
		background: var(--color-red-60);
		border-bottom-left-radius: var(--border-radius-medium);
		border-top-left-radius: var(--border-radius-medium);
	}

	button {
		appearance: none;
		position: relative;
		flex: none;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--space-1);
		box-sizing: border-box;
		height: 30px;
		min-width: 30px;
		border: var(--border-width-button) solid var(--color-button-primary);
		border-radius: var(--border-radius-medium);
		padding: 0 calc(var(--space-1) + var(--space-4));
		font-size: var(--font-size-button-label);
		font-weight: var(--font-weight-button-label);
		line-height: var(--line-height-button-label);
		color: var(--color-on-layer-inverse);
		background: var(--color-button-primary);
		background-blend-mode: normal, darken, normal, darken;
		background-image:
			linear-gradient(
				180deg,
				transparent 50%,
				rgba(164, 164, 164, 0) 50%,
				rgba(53, 53, 53, 0.1) 100%
			),
			linear-gradient(
				180deg,
				transparent 50%,
				rgba(125, 125, 125, 0) 50%,
				rgba(0, 0, 0, 0.16) 100%
			),
			linear-gradient(
				180deg,
				transparent 50%,
				rgba(53, 53, 53, 0.1) 50%,
				rgba(164, 164, 164, 0) 100%
			),
			linear-gradient(
				180deg,
				transparent 50%,
				rgba(0, 0, 0, 0.16) 50%,
				rgba(125, 125, 125, 0) 100%
			);
		background-size:
			auto 200%,
			auto 200%,
			auto 200%,
			auto 200%;
		background-position:
			0 100%,
			0 0,
			0 0,
			0 0;
		transition: background-position var(--motion-duration-quick-2)
			var(--motion-easing-linear);
		cursor: pointer;

		&:hover {
			color: var(--color-on-layer-inverse);
			background-position:
				0 0,
				0 100%,
				0 0,
				0 0;
		}
	}
}

/* Hide error by default unless unknown error is detected */
.sb-errordisplay:not(.ds-unknown-error) {
	display: none !important;
}