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

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

	&.sapUiFupDisabled {
		pointer-events: none;
	}

	.sapMBtn {
		z-index: 1;
	}

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

.sapUiFup.sapMBarChild {
	height: 3rem;
}

.sapUiSizeCompact {
	.sapUiFup.sapMBarChild {
		height: 2rem;
	}
	.sapUiFupInputMask {
		height: 1.625rem;
	}
}

.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: 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: @sapUiButtonHoverBackground;
}

.sapUiFup .sapUiBtnS:active {
	background-color: @sapUiButtonActiveBackground;
}

.sapUiFup .sapUiBtnS.sapUiBtnNorm:active {
	border-color: @sapUiButtonActiveBorderColor;
}

.sapUiFup .sapMBtnHoverable:hover {
	background-image: none;
	background-color: @sapUiButtonHoverBackground;
}

.sapUiFup .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):hover {
	background-color: @sapUiButtonAcceptHoverBackground;
	border-color: @sapUiButtonAcceptHoverBorderColor;
}

.sapUiFup .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):active {
	background-color: @sapUiButtonAcceptActiveBackground;
	border-color: @sapUiButtonAcceptActiveBorderColor;
}

.sapUiFup .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):hover {
	background-color: @sapUiButtonRejectHoverBackground;
	border-color: @sapUiButtonRejectHoverBorderColor;
}

.sapUiFup .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):active {
	background-color: @sapUiButtonRejectActiveBackground;
	border-color: @sapUiButtonRejectActiveBorderColor;
}

.sapUiFup .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):hover {
	background-color: @sapUiButtonEmphasizedHoverBackground;
	border-color: @sapUiButtonEmphasizedHoverBorderColor;
}

.sapUiFup .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):active {
	background-color: @sapUiButtonEmphasizedActiveBackground;
	border-color: @sapUiButtonEmphasizedActiveBorderColor;
	text-shadow: none;
}

.sapUiFup .sapMBtnTransparent:hover.sapMBtnHoverable {
	background-color: @sapUiButtonLiteHoverBackground;
	border-color: @sapUiButtonLiteHoverBorderColor;
}

.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: @sapUiButtonFooterHoverBackground;
	}
}


.sapMFooter-CTX .sapUiFup .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):hover {
	background-color: @sapUiButtonAcceptHoverBackground;
	border-color: @sapUiButtonAcceptHoverBorderColor;
}

.sapMFooter-CTX .sapUiFup .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):hover {
	background-color: @sapUiButtonRejectHoverBackground;
	border-color: @sapUiButtonRejectHoverBorderColor;
}

.sapMFooter-CTX .sapUiFup .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):hover {
	background-color: @sapUiButtonEmphasizedHoverBackground;
	border-color: @sapUiButtonEmphasizedHoverBorderColor;
}

.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: @sapUiButtonActiveBackground;
		border-color: @sapUiButtonActiveBorderColor;
		color: @sapUiButtonActiveTextColor;
		text-shadow: none;
	}
}

.sapUiFup {
	.sapMBtnInner:active .sapMBtnIcon,
	.sapUiFupGroup:active .sapMBtn > span.sapMBtnInner.sapMBtnAccept > .sapMBtnIcon,
	.sapUiFupGroup:active .sapMBtn > span.sapMBtnInner.sapMBtnReject > .sapMBtnIcon {
		color: @sapUiButtonActiveTextColor;
	}
}