/* Shared by the DUR widgets. Logical properties are used throughout so RTL mirrors for free. */
.dur-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.dur-btn__label {
	white-space: normal;
	overflow-wrap: break-word;
}

.dur-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.dur-btn__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.dur-btn__icon svg,
.dur-btn__icon img {
	width: 100%;
	height: 100%;
	display: block;
}

[dir="rtl"] .dur-btn__icon--flip svg {
	transform: scaleX(-1);
}

/* "Use parent container width": the widget fills its (boxed) parent, no own max width / gutter. */
.dur-inherit-yes {
	--dur-max: 100%;
	--dur-gutter: 0px;
}

/* The feature panel is background-filled, so its text keeps an inner padding in this mode. */
.dur-inherit-yes .dur-feature__content {
	padding-inline-start: 48px;
	padding-inline-end: 32px;
}

/* Saudi Riyal symbol: follows the text colour and size. */
.dur-sar {
	display: inline-block;
	vertical-align: baseline;
}

.dur-sar svg {
	display: inline-block;
	width: auto;
	height: 0.82em;
	fill: currentColor;
	vertical-align: baseline;
}

.dur-sar svg path {
	fill: currentColor;
}

/* Arabic (right-to-left) widgets use IBM Plex Sans Arabic. Change the font here, or set --dur-font-rtl on a widget. */
[class*="dur-"][dir="rtl"],
[class*="dur-"][dir="rtl"] *:not(i):not(svg):not(path):not([class*="eicon"]):not([class*="fa-"]) {
	font-family: var(--dur-font-rtl, "IBM Plex Sans Arabic"), "Montserrat", sans-serif !important;
	/* Letter-spacing breaks the joined Arabic letters apart. */
	letter-spacing: 0 !important;
}