@openui5/sap.m/src/sap/m/themes/base/Button.less

OpenUI5 UI Library sap.m

/* ============================= */
/* CSS for control sap.m/Button  */
/* Base theme                    */
/* ============================= */

.sapMBtn {
	height: 3rem;
	margin: 0;
	padding: 0.250rem 0;
	vertical-align: top;
	border: none;
	/* should be always transparent since this is the background of the clickable area */
	background-color: transparent;
}

.sapMBtn:focus {
	outline: none;
}
.sapMBtn::-moz-focus-inner {
	padding: 0;
	border: 0
}
.sapMBtn:not(.sapMBtnDisabled) {
	cursor: pointer;
}

/* override the default cursor of .sapUiIcon */
.sapMBtn .sapMBtnIcon {
	cursor: inherit;
}

.sapMBtnBase {
	position: relative;
}

.sapMBtn .sapMBtnInner {
	display: flex;
	justify-content: center;
}

.sapMBtn .sapMBtnContent {
	display: inline-block;
	flex-shrink: 1;
}

/* --------------------- */
/* Inner area            */
/* --------------------- */
.sapMBtnInner {
	vertical-align: top;
	-webkit-appearance: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	box-sizing: border-box;
	font-family: var(--sapButton_FontFamily);
	font-size: 0.875rem;
	height: var(--sapElement_Height);
	min-width: 2.500rem;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	background-color: var(--sapButton_Background);
	border: 0.0625rem solid var(--sapButton_BorderColor);
	border-radius: 0.2rem;
	color: var(--sapButton_TextColor);
	text-shadow: @sapUiShadowText;
}

.sapMBtnInner::-moz-focus-inner {
	border: 0;
}
.sapMBtnInner:focus,
.sapMBtnContent > span:focus {
	outline: none;
}

/* paddings depends on the presence and placement of text and icons */
.sapMBtnInner.sapMBtnText {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

/* ------------------- */
/* Content area        */
/* ------------------- */
.sapMBtnContent {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
	line-height: 2.375rem;
}

/* unstyled button content line height should be normal on iOS devices to fit into the button */
html[data-sap-ui-os^="iOS"] .sapMBtnBase:not(.sapMBtn) .sapMBtnContent {
	line-height: normal;
}

/* ------------------- */
/* Button Icon         */
/* ------------------- */
.sapMBtnIcon.sapUiIcon {
	font-size: 1.375rem;
	line-height: 2.375rem;
	width: 2.375rem;
	text-align: center;
	margin: 0;
	padding: 0;
	vertical-align: top;
	max-height: 2.375rem;
	color: var(--sapButton_IconColor);
}

.sapMBtnInner .sapMBtnIcon.sapMImg {
	height: 2.375rem;
	max-width: 2.375rem;
	width: auto;
}

/* ------------------------------------------------ */
/* Buttons in a Bar                                 */
/* (add separators, remove top/bottom border)       */
/* ------------------------------------------------ */

.sapMIBar .sapMBtnInner {
	vertical-align: top;
}

/* ------------------------------------------------ */
/* Compact size                                     */
/* ------------------------------------------------ */

.sapMIBar.sapMTB-Info-CTX,
.sapUiSizeCompact {

	.sapMBtn {
		height: 2.000rem;
		padding: 0.1875rem 0;
	}

	.sapMBtnInner {
		height: var(--sapElement_Compact_Height);
		min-width: 2.0rem;
	}

	.sapMBtnContent {
		line-height: 1.500rem;
	}

	.sapMBtnIcon.sapUiIcon {
		line-height: 1.500rem;
		width: 1.000rem;
		font-size: 1.000rem;
		max-height: 1.500rem;
	}

	.sapMBtnInner > img {
		height: 1.250rem;
		width: auto;
		max-width: 1.250rem;
		margin-left: 0rem;
		margin-right: 0rem;
	}
}

/* ------------------------------------------------ */
/* Condensed size                                   */
/* ------------------------------------------------ */

.sapUiSizeCondensed .sapUiTableDataCell {

	.sapMBtn {
		height: 1.375rem;
		padding-top: 0;
		padding-bottom: 0;
	}

	.sapMBtnInner {
		height: 1.375rem;
		min-width: 2.0rem;
	}

	.sapMBtnInner.sapMBtnText,
	.sapMBtnInner1.sapMBtnIconFirst:not(.sapMBtnBack) {
		padding-left: 0.4375rem;
		padding-right: 0.4375rem;
	}

	.sapMBtnInner > img {
		height: 1.250rem;
		width: auto;
		max-width: 1.250rem;
		margin-left: 0.250rem;
		margin-right: 0.250rem;
	}

	.sapMIBar-CTX .sapMBtnInner {
		margin: 0;
	}

	.sapMBtnIcon.sapUiIcon {
		line-height: 1.250rem;
		font-size: 1.000rem;
		max-height: 1.250rem;
		width: 1.000rem;
		min-width: 1.000rem;
	}

	.sapMBtnContent {
		line-height: 1.250rem;
	}
}

/* ---------------------------------------------------------------------*/
/* Disabled, hover and active states:                                   */
/* ---------------------------------------------------------------------*/

.sapMBtnDisabled {
	text-shadow: none;
	cursor: default;
}

.sapMBtn:hover > .sapMBtnHoverable {
	background-image: none;
	background-color: var(--sapButton_Hover_Background);
	border-color: var(--sapButton_Hover_BorderColor);
}

.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent) {

	&.sapMBtnDefault,
	&.sapMBtnGhost {
		color: var(--sapButton_Hover_TextColor);

		.sapUiIcon {
			color: var(--sapButton_Hover_TextColor);
		}
	}
}

:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive {
	background-image: none;
	background-color: var(--sapButton_Active_Background);
	border-color: var(--sapButton_Active_BorderColor);
	color: var(--sapButton_Active_TextColor);
	text-shadow: none;
}

:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive .sapMBtnIcon {
	color: var(--sapButton_Active_TextColor);
}

/* ---------------------------------------------------------------------*/
/* Special buttons have the same look on a page and in a header/footer. */
/* ---------------------------------------------------------------------*/

span.sapMBtnInner.sapMBtnAccept {
	background-image: none;
	background-color: var(--sapButton_Accept_Background);
	border-color: var(--sapButton_Accept_BorderColor);
	color: var(--sapButton_Accept_TextColor);

	.sapUiIcon {
		color: var(--sapButton_Accept_TextColor);
	}
}

span.sapMBtnInner.sapMBtnAttention {
	background-image: none;
	background-color: var(--sapButton_Attention_Background);
	border-color: var(--sapButton_Attention_BorderColor);
	color: var(--sapButton_Attention_TextColor);

	.sapUiIcon {
		color: var(--sapButton_Attention_TextColor);
	}
}

:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAccept:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
	color: var(--sapButton_Accept_TextColor);
}

:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAttention:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
	color: var(--sapButton_Attention_TextColor);
}

.sapMBtn:hover > .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed) {
	background-color: var(--sapButton_Accept_Hover_Background);
	border-color: var(--sapButton_Accept_Hover_BorderColor);
	color: var(--sapButton_Accept_Hover_TextColor);

	bdi {
		color: var(--sapButton_Accept_Hover_TextColor);
	}
}

.sapMBtn:hover > .sapMBtnHoverable.sapMBtnAttention:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed) {
	background-color: var(--sapButton_Attention_Hover_Background);
	border-color: var(--sapButton_Attention_Hover_BorderColor);
	color: var(--sapButton_Attention_Hover_TextColor);

	bdi {
		color: var(--sapButton_Attention_Hover_TextColor);
	}
}

.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnHoverable.sapMBtnAttention:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAttention:hover:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed) .sapUiIcon,
:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAttention:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed):hover > .sapMBtnIcon {
	color: var(--sapButton_Attention_Hover_TextColor);
}

.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAccept:hover:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed) .sapUiIcon,
:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAccept:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed):hover > .sapMBtnIcon {
	color: var(--sapButton_Accept_Hover_TextColor);
}

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAccept.sapMBtnActive {
	background-color: var(--sapButton_Accept_Active_Background);
	border-color: var(--sapButton_Accept_Active_BorderColor);
	text-shadow: none;
}

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAttention.sapMBtnActive {
	background-color: var(--sapButton_Attention_Active_Background);
	border-color: var(--sapButton_Attention_Active_BorderColor);
	text-shadow: none;
}

/* ---------------------------------------- */

span.sapMBtnInner.sapMBtnReject {
	background-image: none;
	background-color: var(--sapButton_Reject_Background);
	border-color: var(--sapButton_Reject_BorderColor);
	color: var(--sapButton_Reject_TextColor);

	.sapUiIcon {
		color: var(--sapButton_Reject_TextColor);
	}
}

:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnReject:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
	color: var(--sapButton_Reject_TextColor);
}

.sapMBtn:hover > .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
	background-color: var(--sapButton_Reject_Hover_Background);
	border-color: var(--sapButton_Reject_Hover_BorderColor);
	color: var(--sapButton_Reject_Hover_TextColor);

	bdi {
		color: var(--sapButton_Reject_Hover_TextColor);
	}
}

.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnReject:hover:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed) .sapUiIcon,
:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnReject:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed):hover > .sapMBtnIcon {
	color: var(--sapButton_Reject_Hover_TextColor);
}

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnReject.sapMBtnActive {
	background-color: var(--sapButton_Reject_Active_Background);
	border-color: var(--sapButton_Reject_Active_BorderColor);
	text-shadow: none;
}

/* ---------------------------------------- */

span.sapMBtnInner.sapMBtnEmphasized {
	background-image: none;
	background-color: var(--sapButton_Emphasized_Background);
	border-color: var(--sapButton_Emphasized_BorderColor);
	color: var(--sapButton_Emphasized_TextColor);
	text-shadow: 0 0 0.125rem var(--sapButton_Emphasized_TextShadow);

	.sapUiIcon, sapMBtnIcon {
		color: var(--sapButton_Emphasized_TextColor);
	}
}

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive > .sapMBtnIcon {
	color: var(--sapButton_Emphasized_Active_TextColor);
}

.sapMBtn:hover > .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
	background-color: var(--sapButton_Emphasized_Hover_Background);
	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
	color: var(--sapButton_Emphasized_Hover_TextColor);

	.sapMBtnIcon {
		color: var(--sapButton_Emphasized_Hover_TextColor);
	}
}

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
	background-color: var(--sapButton_Emphasized_Active_Background);
	border-color: var(--sapButton_Emphasized_Active_BorderColor);
	text-shadow: none;
	font-weight: var(--sapButton_Emphasized_FontWeight);
	color: var(--sapButton_Emphasized_Active_TextColor);
}

.sapMBtn .sapMBtnCritical,
.sapContrast span.sapMBtnInner.sapMBtnCritical {
	background: var(--sapButton_Critical_Background);
	border-color: var(--sapButton_Critical_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Critical_TextColor);
	}
}

.sapMBtn .sapMBtnNegative,
.sapContrast span.sapMBtnInner.sapMBtnNegative {
	background: var(--sapButton_Negative_Background);
	border-color: var(--sapButton_Negative_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Negative_TextColor);
	}
}

.sapMBtn .sapMBtnSuccess,
.sapContrast span.sapMBtnInner.sapMBtnSuccess {
	background: var(--sapButton_Success_Background);
	border-color: var(--sapButton_Success_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Success_TextColor);
	}
}

.sapMBtn .sapMBtnNeutral,
.sapContrast span.sapMBtnInner.sapMBtnNeutral {
	background: var(--sapButton_Neutral_Background);
	border-color: var(--sapButton_Neutral_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Neutral_TextColor);
	}
}

.sapMBtn .sapMBtnCritical.sapMBtnInner,
.sapMBtn .sapMBtnNegative.sapMBtnInner,
.sapMBtn .sapMBtnSuccess.sapMBtnInner,
.sapMBtn .sapMBtnNeutral.sapMBtnInner {
	text-shadow: var(--sapContent_ContrastTextShadow);
}

.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnCritical {
	background: var(--sapButton_Critical_Hover_Background);
	border-color: var(--sapButton_Critical_Hover_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Critical_Hover_TextColor);
	}
}

.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnNegative {
	background: var(--sapButton_Negative_Hover_Background);
	border-color: var(--sapButton_Negative_Hover_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Negative_Hover_TextColor);
	}
}

.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnSuccess {
	background: var(--sapButton_Success_Hover_Background);
	border-color: var(--sapButton_Success_Hover_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Success_Hover_TextColor);
	}
}

.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnNeutral {
	background: var(--sapButton_Neutral_Hover_Background);
	border-color: var(--sapButton_Neutral_Hover_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Neutral_Hover_TextColor);
	}
}

.sapMBtn:not(.sapMBtnDisabled) .sapMBtnCritical.sapMBtnActive {
	background: var(--sapButton_Critical_Active_Background);
	border-color: var(--sapButton_Critical_Active_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Critical_Active_TextColor);
	}
}

.sapMBtn:not(.sapMBtnDisabled) .sapMBtnNegative.sapMBtnActive {
	background: var(--sapButton_Negative_Active_Background);
	border-color: var(--sapButton_Negative_Active_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Negative_Active_TextColor);
	}
}

.sapMBtn:not(.sapMBtnDisabled) .sapMBtnSuccess.sapMBtnActive {
	background: var(--sapButton_Success_Active_Background);
	border-color: var(--sapButton_Success_Active_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Success_Active_TextColor);
	}
}

.sapMBtn:not(.sapMBtnDisabled) .sapMBtnNeutral.sapMBtnActive {
	background: var(--sapButton_Neutral_Active_Background);
	border-color: var(--sapButton_Neutral_Active_BorderColor);

	.sapMBtnContent,
	.sapMBtnIcon {
		color: var(--sapButton_Neutral_Active_TextColor);
	}
}

/* ---------------------------------------------------------------------*/
/* Styles for buttons in Toolbar of type Info.                          */
/* ---------------------------------------------------------------------*/

.sapMIBar.sapMTB-Info-CTX {
	.sapMBtn .sapMBtnInner.sapMBtnDefault .sapUiIcon,
	.sapMBtn .sapMBtnInner.sapMBtnDefault:not(.sapMToggleBtnPressed),
	.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault,
	.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault .sapUiIcon,
	.sapMBtn:hover > .sapMBtnInner.sapMBtnDefault .sapMBtnIcon,
	.sapMBtn:hover > .sapMBtnInner.sapMBtnDefault {
		color: var(--sapInfobar_TextColor);
		text-shadow: none;
		background-color: transparent;
		border: none;
	}
}

.sapMIBar.sapMTB-Info-CTX.sapMTBInactive {
	.sapMBtn .sapMBtnInner.sapMBtnDefault .sapUiIcon,
	.sapMBtn .sapMBtnInner.sapMBtnDefault:not(.sapMToggleBtnPressed),
	.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault,
	.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault .sapUiIcon,
	.sapMBtn:hover > .sapMBtnInner.sapMBtnDefault .sapMBtnIcon,
	.sapMBtn:hover > .sapMBtnInner.sapMBtnDefault {
		color: var(--sapList_TextColor);
	}
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) bdi {
	color: var(--sapContent_ContrastIconColor);
}

.sapMTB-Info-CTX .sapMBtn:hover > .sapMBtnDefault.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) .sapUiIcon,
.sapMTB-Info-CTX .sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnDefault.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) .sapUiIcon,
.sapMTB-Info-CTX .sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) bdi,
.sapMTB-Info-CTX .sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) .sapUiIcon {
	color: var(--sapList_TextColor);
}

/* Button, used as a focus dom ref for active toolbar */
.sapUiSizeCompact .sapMTBActiveButton,
.sapMTBActiveButton {
	position: relative;
	width: 0;
	height: 0;
	opacity: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

/* ---------------------------------------------------------------------*/
/* Transparent buttons looks like normal one in a header/footer.        */
/* The following rules are overridden in a bar below:                   */
/* ---------------------------------------------------------------------*/

.sapMBtnBack,
.sapMBtnTransparent {
	background-image: none;
	background-color: var(--sapButton_Lite_Background);
	border-color: var(--sapButton_Lite_BorderColor);
	color: var(--sapButton_Lite_TextColor);
}

.sapMBtnGhost {
	background-image: none;
	border-color: fade(@sapUiButtonLiteTextColor, 50);
	background-color: transparent;
	color: var(--sapButton_Lite_TextColor);
}

.sapMBtnGhost.sapMBtnInner {
	text-shadow: @sapUiShadowText;
}

:not(.sapMBtnDisabled) .sapMBtnBack > .sapMBtnIcon,
:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon,
:not(.sapMBtnDisabled) .sapMBtnGhost > .sapMBtnIcon {
	color: var(--sapButton_IconColor);
}

.sapMBtn:hover > .sapMBtnBack.sapMBtnHoverable {
	background-color: var(--sapButton_Lite_Hover_Background);
	border-color: var(--sapButton_Lite_Hover_BorderColor);
}

.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) {
	color: var(--sapButton_Lite_Hover_TextColor);

	.sapUiIcon {
		color: var(--sapButton_Lite_Hover_TextColor);
	}
}

.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnHoverable.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
*.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed):hover > .sapMBtnIcon {
	color: var(--sapButton_Lite_Hover_TextColor);
}

.sapMBtn:hover > .sapMBtnGhost.sapMBtnHoverable {
	background-color: fade(@sapUiButtonLiteTextColor, 20);
}

:not(.sapMBtnDisabled) > .sapMBtnBack.sapMBtnActive,
:not(.sapMBtnDisabled):hover > .sapMBtnBack.sapMBtnActive,
:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnActive,
:not(.sapMBtnDisabled):hover > .sapMBtnTransparent.sapMBtnActive,
:not(.sapMBtnDisabled) > .sapMBtnGhost.sapMBtnActive,
:not(.sapMBtnDisabled):hover > .sapMBtnGhost.sapMBtnActive {
	background-color: var(--sapButton_Lite_Active_Background);
	border-color: var(--sapButton_Lite_Active_BorderColor);
	text-shadow: none;
}

/* Transparent button in Light Info toolbar/Facet filter */
.sapMTB-Info-CTX {

	:not(.sapMBtnDisabled) .sapMBtnBack > .sapMBtnIcon,
	:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon,
	:not(.sapMBtnDisabled) .sapMBtnGhost > .sapMBtnIcon {
		color: var(--sapInfobar_TextColor);
	}
}

/* ----------------------------------------------------------------- */
/* Default type Buttons in a Toolbar should be styled as transparent */
/* ----------------------------------------------------------------- */

/* transparent Toolbar Context */
.sapMTB-Transparent-CTX .sapMBtnDefault {
	background-image: none;
	background: var(--sapButton_Lite_Background);
}

.sapMTB-Transparent-CTX .sapMBtn:hover > .sapMBtnDefault.sapMBtnHoverable {
	background: var(--sapButton_Lite_Hover_Background);
}

/* ------------------------------------------------ */
/* Compact size                                     */
/* ------------------------------------------------ */

.sapUiSizeCompact {

	.sapMBtnInner {
		text-shadow: none;
	}

	.sapMBtnGhost {
		text-shadow: @sapUiShadowText;
	}

	.sapMBar-CTX .sapMBtnDefault.sapMBtnInner:not(.sapMBtnDisabled) {
		margin: 0;
		border-color: transparent;
	}

	.sapMBar-CTX .sapMBtnInner.sapMBtnGhost:not(.sapMBtnDisabled) {
		border-color: fade(@sapUiButtonLiteTextColor, 50)
	}

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

/* ------------------------------------------------ */
/* Condensed size                                   */
/* ------------------------------------------------ */

.sapUiSizeCondensed .sapUiTableDataCell {

	.sapMBtnInner {
		text-shadow: none;
	}

	.sapMBar-CTX .sapMBtnInner {
		border-color: transparent;
	}

	.sapMBtnContent {
		line-height: 1.250rem;
	}

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

/* ----------------------*/
/* Badges                */
/* ----------------------*/

.sapMBtn {
	overflow: visible;

	.sapMBadge {

		&.sapMBadgeTopRight .sapMBadgeIndicator {
			z-index: 1;
			top: -0.3125rem;
			right: -0.4375rem;
		}

		.sapMBadgeIndicator::after {
			text-overflow: clip;
			height: 0.875rem;
			line-height: 0.875rem;
			padding: 0 0.1875rem;
			background-color: var(--sapContent_BadgeBackground);
			border-color: var(--sapContent_BadgeBorderColor);
			color: var(--sapContent_BadgeTextColor);
		}
		.sapMBadgeIndicator.sapMBadgeAttention {
			width: 0.75rem;
			height: 0.75rem;
			top: -0.25rem;
			right: -0.25rem;
			box-sizing: border-box;
		}
	}
}

.sapUiSizeCompact {

	.sapMBtn {

		.sapMBadgeTopRight.sapMBadge {

			&.sapMBtnIconFirst:not(.sapMBtnText) {
				padding: 0 0.4375rem;
			}

			.sapMBadgeIndicator:not(.sapMBadgeAttention) {
				line-height: 2rem;
				display: inline-block;
				position: relative;
				top: 0.25rem;
				right: -0.25rem;
				padding-right: 0.0625rem;
			}

			.sapMBadgeIndicator.sapMBadgeAttention {
				width: 0.625rem;
				height: 0.625rem;
			}
		}
	}
}