/* ============================================ */
/* CSS for control sap.ui.unified.FileUploader  */
/* Base theme                                   */
/* ============================================ */

.sapUiFup {
	position: relative;
	display: inherit;
	z-index: 0;
	height: var(--sapElement_Height);
	width: 100%;
	min-width: 8.5rem;

	&.sapUiFupButtonOnly {
		width: fit-content;
		min-width: 0;
		margin: 0.25rem 0;

		.sapMInputBaseContentWrapper {
			box-shadow: none !important; /* cannot remove !important because of different DOM structure and impossibility to override the selector that originally introduces border-shadow */
			border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
			border-radius: var(--sapButton_BorderCornerRadius);
			background: transparent;
			padding: 0;
			height: 100%;

			.sapMBtn {
				height: var(--sapElement_Height);
				padding: 0;
			}
		}

		&.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper):hover {
			background: none;
			background-color: none;
			border-color: transparent;
			box-shadow: none;
		}
	}

	&.sapUiFupDisabled {
		pointer-events: none;
	}

	.sapMBtn {
		z-index: 1;
	}

	.sapUiLocalBusyIndicator {
		z-index: 2;
	}

	.sapMInputBaseContentWrapper {
		position: relative;
		box-sizing: border-box;
		width: 100%;

		.sapUiFupVisual {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: relative;
			display: block;
			align-items: center;
			justify-content: stretch;
			cursor: pointer;

			.sapUiFupBrowseIcon,
			.sapUiFupClearIcon {
				height: 100%;
				width: 2.25rem;
				outline: none;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				border-radius: var(--sapField_BorderCornerRadius);
			}

			.sapUiFupBrowseIcon {
				inset-inline-end: 0;
			}

			.sapUiFupClearIcon {
				inset-inline-end: 2.25rem;
			}

			.sapUiFupPlaceholder {
				user-select: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				pointer-events: none;
				display: flex;
				align-items: center;
				justify-content: start;
				position: absolute;
				inset-inline-start: 0;
				inset-inline-end: 2.25rem;
				width: 100%;
				max-width: 100%;
				height: 100%;
				box-sizing: border-box;
				background: transparent;
				border: none;

				& > div {
					padding: 0 0.625rem;
					max-width: 100%;
					min-width: 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-style: italic;
					-webkit-appearance: none;
					-moz-appearance: textfield;
					font-size: var(--sapFontSize);
					font-family: var(--sapFontFamily);
					color: var(--sapField_PlaceholderTextColor);
					line-height: normal;
				}
			}

			.sapUiFupTokenizer {
				display: flex;
				align-items: center;
				justify-content: start;
				position: absolute;
				top: 0;
				inset-inline-start: 0;
				min-width: 100%;
				max-width: 100%;
				padding-block: 0;
				padding-inline: 0.125rem 4.75rem;
				height: 100%;
				box-sizing: border-box;
				pointer-events: none;

				.sapMToken,
				.sapMTokenizerIndicator {
					pointer-events: auto;
				}

			}
		}
	}

	&.sapUiFupButtonOnly .sapMBtn {
		width: 100%;
	}

	&:not(.sapMInputBaseDisabled) .sapUiFupPlaceholder {
		padding-inline-end: 2.375rem;
	}

}

.sapUiFup form {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.sapUiFupInputMask { /* the element masking the real (but hidden) file input, so the clickable area has exactly the same size as the visible control */
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

.sapUiFup.sapUiFupDisabled .sapUiFupInputMask {
	cursor: default;
}

.sapUiFup.sapMBarChild {
	height: 3rem;
}

/* Vertical alignment of button-only FileUploader in Bar */
/* ensure FileUploader in Bar (sapMBarChild) centers its content */
.sapUiFup.sapUiFupButtonOnly.sapMBarChild {
	display: inline-flex;
	align-items: center;
	height: var(--sapElement_Height);
}

/* make the button full height and remove its vertical margin */
.sapUiFup.sapUiFupButtonOnly .sapMBtn {
	margin: 0;
	height: var(--sapElement_Height);
	align-items: center;
	justify-content: center;
}

.sapUiSizeCompact {

	.sapUiFup.sapMBarChild {
		height: 2rem;
	}

	&:not(.sapMInputBaseDisabled) .sapUiFupPlaceholder {
		padding-inline-end: 2rem;
	}

	.sapUiFup .sapMInputBaseContentWrapper {

		.sapUiFupBrowseIcon,
		.sapUiFupClearIcon {
			width: 2rem;
		}

		.sapUiFupClearIcon {
			inset-inline-end: 2rem;
		}

		.sapUiFupTokenizer {
			padding-inline: 0.125rem 4.25rem;
		}

		.sapMTokenizer .sapMTokenizerScrollContainer {
			vertical-align: middle;
		}
	}

	.sapMBarChild .sapUiFup.sapUiFupButtonOnly,
	.sapUiFup.sapUiFupButtonOnly.sapMBarChild {
		height: var(--sapElement_Compact_Height);
	}
	/* make the button full height and remove its vertical margin */
	.sapUiFup.sapUiFupButtonOnly .sapMBtn {
		height: var(--sapElement_Compact_Height);
	}
}

.sapUiCFUM .sapUiFupInputMask,
.sapUiSizeCompact .sapUiCFUM .sapUiFupInputMask {
	height: 1.5rem;
	margin-top: 0;
}

.sapUiFupInputMask > input { /* the real, but hidden file input */
	position: absolute;
	opacity: 0;
	top: 0px;
	bottom: 0px;
	cursor: pointer;
	left: -4em; /* avoid the input field behind the file chooser */
	font-size: 500px; /* to make the field high enough for most themes; for themes with very large fonts this needs to be increased further */
	width: 100%;
	height: 100%;
}

.sapUiFupInputMask > input[disabled],
.sapUiFupInputMask > input:disabled {
	cursor: default;
}

html[data-sap-ui-browser^='sf'] .sapUiFupInputMask > input, /* for Safari and Chrome the file input is not clickable with opacity "0" */
html[data-sap-ui-browser^='cr'] .sapUiFupInputMask > input {
	position: relative;
	left: auto;
	opacity: 0.01;
}

.sapUiFup .sapUiBtnS.sapUiBtnStdFocus:hover {
	background-color: var(--sapButton_Hover_Background);
}

.sapUiFup .sapUiBtnS:active {
	background-color: var(--sapButton_Active_Background);
}

.sapUiFup .sapUiBtnS.sapUiBtnNorm:active {
	border-color: var(--sapButton_Active_BorderColor);
}

.sapUiFup .sapMBtnHoverable:hover {
	background-image: none;
	background-color: var(--sapButton_Hover_Background);
}

.sapUiFup .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):hover {
	background-color: var(--sapButton_Accept_Hover_Background);
	border-color: var(--sapButton_Accept_Hover_BorderColor);
}

.sapUiFup .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):active {
	background-color: var(--sapButton_Accept_Active_Background);
	border-color: var(--sapButton_Accept_Active_BorderColor);
}

.sapUiFup .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):hover {
	background-color: var(--sapButton_Reject_Hover_Background);
	border-color: var(--sapButton_Reject_Hover_BorderColor);
}

.sapUiFup .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):active {
	background-color: var(--sapButton_Reject_Active_Background);
	border-color: var(--sapButton_Reject_Active_BorderColor);
}

.sapUiFup .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):hover {
	background-color: var(--sapButton_Emphasized_Hover_Background);
	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
}

.sapUiFup .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):active {
	background-color: var(--sapButton_Emphasized_Active_Background);
	border-color: var(--sapButton_Emphasized_Active_BorderColor);
	text-shadow: none;
}

.sapUiFup .sapMBtnTransparent:hover.sapMBtnHoverable {
	background-color: var(--sapButton_Lite_Hover_Background);
	border-color: var(--sapButton_Lite_Hover_BorderColor);
}

.sapMFooter-CTX .sapUiFup,
.sapMTB-Transparent-CTX .sapUiFup {

	.sapMBtnHoverable:not(.sapMBtnActive):hover,
	.sapMBtnInner:hover.sapMBtnHoverable:not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized):not(.sapMBtnAccept):not(.sapMBtnReject):not(.sapMBtnActive) {
		background-color: var(--sapButton_Lite_Hover_Background);
	}
}

.sapMFooter-CTX .sapUiFup .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):hover {
	background-color: var(--sapButton_Accept_Hover_Background);
	border-color: var(--sapButton_Accept_Hover_BorderColor);
}

.sapMFooter-CTX .sapUiFup .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):hover {
	background-color: var(--sapButton_Reject_Hover_Background);
	border-color: var(--sapButton_Reject_Hover_BorderColor);
}

.sapMFooter-CTX .sapUiFup .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):hover {
	background-color: var(--sapButton_Emphasized_Hover_Background);
	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
}

.sapUiFup,
.sapMTB-Transparent-CTX .sapUiFup {

	.sapMBtnInner:active,
	.sapMBtnTransparent.sapMBtnHoverable:active,
	.sapMBtnInner:active.sapMBtnTransparent.sapMBtnHoverable:not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized):not(.sapMBtnAccept):not(.sapMBtnReject):not(.sapMBtnActive) {
		background-image: none;
		background-color: var(--sapButton_Active_Background);
		border-color: var(--sapButton_Active_BorderColor);
		color: var(--sapButton_Active_TextColor);
		text-shadow: none;
	}
}

.sapUiFup {
	.sapMBtnInner:active .sapMBtnIcon,
	.sapMBtn > span.sapMBtnInner.sapMBtnAccept > .sapMBtnIcon,
	.sapMBtn > span.sapMBtnInner.sapMBtnReject > .sapMBtnIcon {
		color: var(--sapButton_Active_TextColor);
	}
}

/* Icon colors, borders, and backgrounds for different Value States */
.sapUiFup:not(.sapUiFupDisabled) {
	.sapMInputBaseContentWrapper.sapMInputBaseContentWrapperState {

		/* Define a reusable mixin for the icon styles */
		.icon-state-styles(@shadow, @activeColor, @borderColor) {
			border-color: @borderColor;

			.sapUiFupBrowseIcon,
			.sapUiFupClearIcon {
				&:hover {
					box-shadow: @shadow;
				}
				&:active {
					box-shadow: @shadow;
					background-color: var(--sapField_Focus_Background);
					color: @activeColor;
				}
			}
		}

		/* Success State */
		&.sapMInputBaseContentWrapperSuccess {
			.icon-state-styles(var(--sapField_Hover_SuccessShadow), var(--sapButton_Accept_Selected_TextColor), var(--sapField_SuccessColor));
		}

		/* Error State */
		&.sapMInputBaseContentWrapperError {
			.icon-state-styles(var(--sapField_Hover_InvalidShadow), var(--sapButton_Reject_Selected_TextColor), var(--sapField_InvalidColor));
		}

		/* Warning State */
		&.sapMInputBaseContentWrapperWarning {
			.icon-state-styles(var(--sapField_Hover_WarningShadow), var(--sapButton_Attention_Selected_TextColor), var(--sapField_WarningColor));
		}

		/* Information State */
		&.sapMInputBaseContentWrapperInformation {
			.icon-state-styles(var(--sapField_Hover_InformationShadow), var(--sapButton_Selected_TextColor), var(--sapField_InformationColor));
		}
	}
}

.sapUiFup .sapMInputBaseContentWrapper:has(.sapMBtnTransparent) {
	border-color: var(--sapButton_Lite_BorderColor);
}

.sapUiFup .sapMInputBaseContentWrapper:has(.sapMBtnReject) {
	border-color: var(--sapButton_Reject_BorderColor);
}

.sapUiFup .sapMInputBaseContentWrapper:has(.sapMBtnAccept) {
	border-color: var(--sapButton_Accept_BorderColor);
}

.sapUiFup.sapUiFupButtonOnly.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:has(.sapMBtnReject):not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper):hover {
	background-color: var(--sapButton_Reject_Hover_Background);
	border-color: var(--sapButton_Reject_Hover_BorderColor);
}

.sapUiFup.sapUiFupButtonOnly.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:has(.sapMBtnAccept):not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper):hover {
	background-color: var(--sapButton_Accept_Hover_Background);
	border-color: var(--sapButton_Accept_Hover_BorderColor);
}

.sapUiFup.sapUiFupButtonOnly.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:has(.sapMBtnEmphasized):not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper):hover {
	background-color: var(--sapButton_Emphasized_Hover_Background);
	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
}