@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

.http-error {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	&::before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		content: attr(data-status);
		font-size: 38.75rem;
		font-weight: 700;
		line-height: 0.7;
		color: tokens.$coral-color-accent-text;
		opacity: 0.1;
		z-index: -1;
	}

	&-content {
		padding: 8.125rem 0 0 26.875rem;

		h1 {
			margin: 0;
			color: tokens.$coral-color-accent-text-active;
			font-size: 6.25rem;
			font-weight: 700;
		}

		p {
			color: tokens.$coral-color-neutral-text;
			font-size: 1.875rem;
			font-weight: 600;
		}

		button {
			padding: 0;
			font-weight: 600;
			text-transform: none;
		}
	}
}