/*
 * Your global styles here
 */
html,
body {
	height: 100%;
}

html {
	background: white;
}

body {
	margin: 0;
}

/* typography */
lightning-formatted-rich-text {
	color: var(--color-body);
}

h2 {
	color: var(--color-body);
	font-size: var(--font-size-large);
	font-weight: var(--font-weight-700);
	line-height: var(--line-height-large);
	margin-bottom: 20px;
}

h3 {
	color: var(--color-body);
	font-size: var(--font-size-medium);
	font-weight: var(--font-weight-700);
	line-height: var(--line-height-medium);
	margin-bottom: 20px;
}

h4 {
	color: var(--color-body);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-700);
	line-height: var(--line-height-small);
}

.accordion-content ol > li::marker {
	font-weight: bold;
}

/* forms */
form {
	width: 100%;
	background-color: var(--color-pure-white);
	padding: 24px 28px 0 28px;
	border-radius: 6px;
}

/* styles for lightning-input (workaround) */
.slds-radio .slds-form-element__label,
.slds-form-element__label,
.slds-required {
	font-family: var(--dxp-s-body-font-family);
	font-size: 14px;
	line-height: var(--line-height-small);
	color: var(--color-body);
	height: 24px;
	font-weight: var(--font-weight-700) !important;
}

.invalid-input .slds-form-element__label,
.invalid-input .slds-required {
	color: var(--color-error);
}

.slds-form-element__label {
	padding-right: 0;
	margin-bottom: 8px;
}

.slds-radio .lightning-input-container {
	margin-top: 8px;
}

.slds-form-element {
	margin-bottom: 0;
}

.small-height .slds-form-element__control {
	height: 36px;
}

.slds-form-element__control {
	height: 48px;
	border-radius: 6px;
}

.slds-input {
	border: 1px solid var(--color-background-light);
	height: 100%;
	padding-left: 16px;
}

.invalid-input .slds-input,
.invalid-input .slds-input:focus {
	border-color: var(--color-error);
}

.slds-input,
.slds-form-element__control {
	background-color: var(--color-background-light);
}

div[populated] .slds-form-element__control,
div[populated] .slds-input {
	background-color: var(--color-pure-white);
}

.slds-form-element__control .slds-input {
	font-family: var(--dxp-s-body-font-family);
}

div[populated] .slds-input {
	border: 1px solid var(--color-gray-100);
}

.slds-input::placeholder {
	color: var(--color-gray-300);
}

.slds-input:focus {
	border: 1px solid var(--color-gray-100);
	box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-background-clip: text;
	-webkit-text-fill-color: var(
		--sds-c-input-text-color,
		var(--dxp-s-form-element-text-color, var(--dxp-g-root-contrast))
	);
	transition: background-color 5000s ease-in-out 0s;
	box-shadow: inset 0 0 20px 20px var(--color-pure-white);
}

.slds-input[disabled] {
	background-color: var(--color-pure-white);
	border-color: var(--color-gray-100);
}

.lightning-input-container.read-only .slds-input[disabled] {
	background-color: var(--color-background-light);
	border: 1px solid var(--color-background-light);
}

.lightning-input-container.read-only div[populated] .slds-input[disabled] {
	background-color: var(--color-pure-white);
	color: var(--color-gray-300);
	border: 1px solid var(--color-gray-100);
}

/* generic classes */
.no-bottom-radius {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.no-top-radius {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.toggle-container {
	height: 80px;
	background-color: var(--color-pure-white);
	border-radius: 6px;
	padding: 28px;
}

.page-section {
	padding-bottom: 64px;
}

.page-subsection {
	padding-bottom: 32px;
}

.left-input {
	padding-right: 14px;
}

.right-input {
	padding-left: 14px;
}

/* toast */
.toast-container .slds-text-heading_small {
	font-size: var(--font-size-medium);
	margin-bottom: 6px;
}

/* MUST be at the end of the file */
.invalid-input .slds-input,
.invalid-input .slds-input:focus,
.invalid-input div[populated] .slds-input,
.invalid-input div[populated] .slds-input:focus {
	border: 1px solid var(--color-error);
}