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

.sapUiFup {
	position: relative;
	display: inherit;
	z-index: 0;

	&.sapUiFupDisabled {
		pointer-events: none;
	}

	.sapUiLocalBusyIndicator {
		z-index: 2;
	}
}

.sapUiFupInp .sapUiFUM {
	top: 2px;
}

.sapUiFupGroup {
	display: table;
}

.sapUiFupGroup > div {
	display: table-row;
}

.sapUiFupGroup > div > div {
	display: table-cell;
	vertical-align: top;
}

.sapUiFup > form {
	display: inline-block;
}

.sapUiFup > form > div {
	position: relative;
	display: inline-block;
}

.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;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
}

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

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

.sapUiFupInputMask > input { /* the real, but hidden file input */
	position: absolute;
	opacity: 0;
	top: 0;
	bottom: 0;
	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: 5000px;
}

.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;
}

html[data-sap-ui-browser^='cr'] .sapUiFupInputMask > input {
	float: right;
}

.sapUiFup:not(.sapUiFupButtonOnly) .sapUiFupGroup > div > div:last-child {
	padding-left: 4px;
}

.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);
}