@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: @sapUiFontFamily;
	font-size: 0.875rem;

	height: 2.500rem;
	min-width: 2.500rem;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;

	background-color: @sapUiButtonBackground;
	border:           0.0625rem solid @sapUiButtonBorderColor;
	border-radius:    0.2rem;
	color:            @sapUiButtonTextColor;
	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 {
	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:            @sapUiButtonIconColor;
}


.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                                     */
/* ------------------------------------------------ */

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

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

	.sapMBtnContent {
		line-height:      1.500rem;
	}

	.sapMBtnIcon {
		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 {
		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: @sapUiButtonHoverBackground;
	border-color: @sapUiButtonHoverBorderColor;
}

.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent) {
	&.sapMBtnDefault,
	&.sapMBtnBack,
	&.sapMBtnGhost {
		color: @sapUiButtonHoverTextColor;
		.sapUiIcon {
			color: @sapUiButtonHoverTextColor;
		}
	}
}

:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive {
	background-image: none;
	background-color: @sapUiButtonActiveBackground;
	border-color:     @sapUiButtonActiveBorderColor;
	color:            @sapUiButtonActiveTextColor;
	text-shadow:      none;
}

:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive .sapMBtnIcon {
	color:            @sapUiButtonActiveTextColor;
}

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

span.sapMBtnInner.sapMBtnAccept {
	background-image: none;
	background-color: @sapUiButtonAcceptBackground;
	border-color:     @sapUiButtonAcceptBorderColor;
	color:            @sapUiButtonAcceptTextColor;

	.sapUiIcon {
		color: @sapUiButtonAcceptTextColor;
	}
}

span.sapMBtnInner.sapMBtnAttention {
	background-image: none;
	background-color: @sapUiButtonAttentionBackground;
	border-color: @sapUiButtonAttentionBorderColor;
	color: @sapUiButtonAttentionTextColor;

	.sapUiIcon {
		color: @sapUiButtonAttentionTextColor;
	}
}

:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAccept:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
	color: @sapUiButtonAcceptTextColor;
}

:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAttention:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
	color: @sapUiButtonAttentionTextColor;
}

.sapMBtn:hover > .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed) {
	background-color: @sapUiButtonAcceptHoverBackground;
	border-color:     @sapUiButtonAcceptHoverBorderColor;
	color: @sapUiButtonAcceptHoverTextColor;

	bdi {
		color: @sapUiButtonAcceptHoverTextColor;
	}
}

.sapMBtn:hover > .sapMBtnHoverable.sapMBtnAttention:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed) {
	background-color: @sapUiButtonAttentionHoverBackground;
	border-color: @sapUiButtonAttentionHoverBorderColor;
	color: @sapUiButtonAttentionHoverTextColor;

	bdi {
		color: @sapUiButtonAttentionHoverTextColor;
	}
}

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

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

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAccept.sapMBtnActive {
	background-color: @sapUiButtonAcceptActiveBackground;
	border-color:     @sapUiButtonAcceptActiveBorderColor;
	text-shadow: none;
}

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAttention.sapMBtnActive {
	background-color: @sapUiButtonAttentionActiveBackground;
	border-color: @sapUiButtonAttentionActiveBorderColor;
	text-shadow: none;
}

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

span.sapMBtnInner.sapMBtnReject {
	background-image: none;
	background-color: @sapUiButtonRejectBackground;
	border-color:     @sapUiButtonRejectBorderColor;
	color:            @sapUiButtonRejectTextColor;

	.sapUiIcon {
		color: @sapUiButtonRejectTextColor;
	}
}

:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnReject:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
	color:            @sapUiButtonRejectTextColor;
}

.sapMBtn:hover > .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
	background-color: @sapUiButtonRejectHoverBackground;
	border-color:     @sapUiButtonRejectHoverBorderColor;
	color: @sapUiButtonRejectHoverTextColor;

	bdi {
		color: @sapUiButtonRejectHoverTextColor;
	}
}

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

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnReject.sapMBtnActive {
	background-color: @sapUiButtonRejectActiveBackground;
	border-color:     @sapUiButtonRejectActiveBorderColor;
	text-shadow: none;
}

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

span.sapMBtnInner.sapMBtnEmphasized {
	background-image: none;
	background-color: @sapUiButtonEmphasizedBackground;
	border-color:     @sapUiButtonEmphasizedBorderColor;
	color:            @sapUiButtonEmphasizedTextColor;
	text-shadow:      0 0 0.125rem @sapUiButtonEmphasizedTextShadow;

	.sapUiIcon, sapMBtnIcon {
		color: @sapUiButtonEmphasizedTextColor;
	}
}

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive > .sapMBtnIcon {
	color: @sapUiButtonEmphasizedActiveTextColor;
}

.sapMBtn:hover > .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
	background-color: @sapUiButtonEmphasizedHoverBackground;
	border-color:     @sapUiButtonEmphasizedHoverBorderColor;
	color: @sapUiButtonEmphasizedHoverTextColor;

	.sapMBtnIcon {
		color: @sapUiButtonEmphasizedHoverTextColor;
	}
}

:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
	background-color: @sapUiButtonEmphasizedActiveBackground;
	border-color:     @sapUiButtonEmphasizedActiveBorderColor;
	text-shadow:      none;
	font-weight: @sapUiButtonEmphasizedFontWeight;
	color: @sapUiButtonEmphasizedTextColor;

	bdi {
		color: @sapUiButtonActiveTextColor;
	}

}

.sapMBtn .sapMBtnCritical,
.sapContrast span.sapMBtnInner.sapMBtnCritical{
	background: @sapUiButtonCriticalBackground;
	border-color: @sapUiButtonCriticalBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonCriticalTextColor;
	}
}

.sapMBtn .sapMBtnNegative,
.sapContrast span.sapMBtnInner.sapMBtnNegative{
	background: @sapUiButtonNegativeBackground;
	border-color: @sapUiButtonNegativeBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonNegativeTextColor;
	}
}

.sapMBtn .sapMBtnSuccess,
.sapContrast span.sapMBtnInner.sapMBtnSuccess{
	background: @sapUiButtonSuccessBackground;
	border-color: @sapUiButtonSuccessBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonSuccessTextColor;
	}
}

.sapMBtn .sapMBtnNeutral,
.sapContrast span.sapMBtnInner.sapMBtnNeutral{
	background: @sapUiButtonNeutralBackground;
	border-color: @sapUiButtonNeutralBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonNeutralTextColor;
	}
}

.sapMBtn .sapMBtnCritical.sapMBtnInner,
.sapMBtn .sapMBtnNegative.sapMBtnInner,
.sapMBtn .sapMBtnSuccess.sapMBtnInner,
.sapMBtn .sapMBtnNeutral.sapMBtnInner{
	text-shadow: @sapUiContentContrastTextShadow;
}

.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnCritical{
	background: @sapUiButtonCriticalHoverBackground;
	border-color: @sapUiButtonCriticalHoverBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonCriticalHoverTextColor;
	}
}

.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnNegative{
	background: @sapUiButtonNegativeHoverBackground;
	border-color: @sapUiButtonNegativeHoverBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonNegativeHoverTextColor;
	}
}

.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnSuccess{
	background: @sapUiButtonSuccessHoverBackground;
	border-color: @sapUiButtonSuccessHoverBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonSuccessHoverTextColor;
	}
}

.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnNeutral{
	background: @sapUiButtonNeutralHoverBackground;
	border-color: @sapUiButtonNeutralHoverBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonNeutralHoverTextColor;
	}
}

.sapMBtn:not(.sapMBtnDisabled) .sapMBtnCritical.sapMBtnActive{
	background: @sapUiButtonCriticalActiveBackground;
	border-color: @sapUiButtonCriticalActiveBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonCriticalActiveTextColor;
	}
}

.sapMBtn:not(.sapMBtnDisabled) .sapMBtnNegative.sapMBtnActive{
	background: @sapUiButtonNegativeActiveBackground;
	border-color: @sapUiButtonNegativeActiveBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonNegativeActiveTextColor;
	}
}

.sapMBtn:not(.sapMBtnDisabled) .sapMBtnSuccess.sapMBtnActive{
	background: @sapUiButtonSuccessActiveBackground;
	border-color: @sapUiButtonSuccessActiveBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonSuccessActiveTextColor;
	}
}

.sapMBtn:not(.sapMBtnDisabled) .sapMBtnNeutral.sapMBtnActive{
	background: @sapUiButtonNeutralActiveBackground;
	border-color: @sapUiButtonNeutralActiveBorderColor;
	.sapMBtnContent,
	.sapMBtnIcon {
		color: @sapUiButtonNeutralActiveTextColor;
	}
}

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

.sapMTB-Info-CTX .sapMBtnInner,
.sapMTB-Info-CTX .sapMBtnInner:hover {
	color: @sapUiInfobarTextColor;
	text-shadow: none;
}

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

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

/* Button, used as a focus dom ref for active toolbar */

.sapUiSizeCompact .sapMTBActiveButton,
.sapMTBActiveButton {
	position: absolute;
	left: -1000000px;
	top: -1000000px;
	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: @sapUiButtonLiteBackground;
	border-color:     @sapUiButtonLiteBorderColor;
	color:            @sapUiButtonLiteTextColor;
}

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

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

:not(.sapMBtnDisabled) .sapMBtnBack > .sapMBtnIcon,
:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon,
:not(.sapMBtnDisabled) .sapMBtnGhost > .sapMBtnIcon {
	color:            @sapUiButtonIconColor;
}

.sapMBtn:hover > .sapMBtnBack.sapMBtnHoverable {
	background-color: @sapUiButtonLiteHoverBackground;
	border-color:     @sapUiButtonLiteHoverBorderColor;
}

.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) {
	color: @sapUiButtonLiteHoverTextColor;
	.sapUiIcon {
		color: @sapUiButtonLiteHoverTextColor;
	}
}

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

.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: @sapUiButtonLiteActiveBackground;
	border-color:     @sapUiButtonLiteActiveBorderColor;
	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: @sapUiInfobarTextColor;
	}
}

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

.sapMIBar-CTX .sapMBtnInner,
.sapMBar .sapMBtnInner,
.sapMHeader-CTX .sapMBtnInner,
.sapMFooter-CTX .sapMBtnInner {
	background: @sapUiButtonLiteBackground;
	border-color: @sapUiButtonLiteBorderColor;
}

.sapMIBar-CTX .sapMBtnInner,
.sapMBar .sapMBtnInner{
	&.sapMBtnCritical{
		background: @sapUiCriticalElement;
		border-color: @sapUiCriticalElement;
	}
	&.sapMBtnNegative{
		background: @sapUiNegativeElement;
		border-color: @sapUiNegativeElement;
	}
	&.sapMBtnNeutral{
		background: @sapButton_Neutral_Background;
		border-color: @sapButton_Neutral_BorderColor;
	}
	&.sapMBtnSuccess{
		background: @sapUiPositiveElement;
		border-color: @sapUiPositiveElement;
	}
}

.sapMIBar-CTX .sapMBtnInner.sapMBtnGhost,
.sapMBar .sapMBtnInner.sapMBtnGhost,
.sapMHeader-CTX .sapMBtnInner.sapMBtnGhost,
.sapMFooter-CTX .sapMBtnInner.sapMBtnGhost {
	background: @sapUiButtonLiteBackground;
	border-color: fade(@sapUiButtonLiteTextColor, 50);
}

.sapMSubHeader-CTX .sapMBtnInner {
	background: @sapUiButtonLiteBackground;
}

.sapMBar-CTX :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive,
.sapMBar-CTX :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnTransparent.sapMBtnHoverable.sapMBtnActive,
.sapMBar-CTX :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnGhost.sapMBtnHoverable.sapMBtnActive {
	background-color: @sapUiButtonActiveBackground;
}

.sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
.sapMIBar-CTX .sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
	background-color: @sapUiButtonLiteHoverBackground;
	border-color:     @sapUiButtonLiteHoverBorderColor;
	color: @sapUiButtonLiteHoverTextColor;

	bdi {
		color: @sapUiButtonLiteHoverTextColor;
	}
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnGhost.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
	background-color: fade(@sapUiButtonLiteTextColor, 20);
	border-color: fade(@sapUiButtonLiteTextColor, 50);
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
	background-color: @sapUiButtonFooterHoverBackground;
	color:            @sapUiButtonFooterTextColor;
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive) {
	background-color: @sapUiButtonAcceptHoverBackground;
	border-color:     @sapUiButtonAcceptHoverBorderColor;
	color:            @sapUiButtonAcceptTextColor;
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnAttention:not(.sapMBtnActive) {
	background-color: @sapUiButtonAttentionHoverBackground;
	border-color: @sapUiButtonAttentionHoverBorderColor;
	color: @sapUiButtonAttentionHoverTextColor;
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive) {
	background-color: @sapUiButtonRejectHoverBackground;
	border-color:     @sapUiButtonRejectHoverBorderColor;
	color:            @sapUiButtonRejectTextColor;
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive) {
	background-color: @sapUiButtonEmphasizedHoverBackground;
	border-color:     @sapUiButtonEmphasizedHoverBorderColor;
	color:            @sapUiButtonEmphasizedTextColor;
	text-shadow:      0 0 0.125rem @sapUiButtonEmphasizedTextShadow;
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnCritical:not(.sapMBtnActive) {
	background-color: darken(@sapUiCriticalElement, 7);
	border-color: darken(@sapUiCriticalElement, 7);
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnNegative:not(.sapMBtnActive) {
	background-color: darken(@sapUiNegativeElement, 7);
	border-color: darken(@sapUiNegativeElement, 7);
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnSuccess:not(.sapMBtnActive) {
	background-color: darken(@sapUiPositiveElement, 7);
	border-color: darken(@sapUiPositiveElement, 7);
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnNeutral:not(.sapMBtnActive) {
	background-color: @sapButton_Neutral_Hover_Background;
	border-color: @sapButton_Neutral_Hover_BorderColor;
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnCritical.sapMBtnActive {
	background-color: darken(@sapUiCriticalElement, 10);
	border-color: darken(@sapUiCriticalElement, 10);
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnNegative.sapMBtnActive {
	background-color: darken(@sapUiNegativeElement, 10);
	border-color: darken(@sapUiNegativeElement, 10);
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnSuccess.sapMBtnActive {
	background-color: darken(@sapUiPositiveElement, 10);
	border-color: darken(@sapUiPositiveElement, 10);
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnNeutral.sapMBtnActive {
	background-color: @sapButton_Neutral_Active_Background;
	border-color: @sapButton_Neutral_Active_BorderColor;
}

/* Separators between buttons in a footer */
.sapMFooter-CTX .sapMBtnInner :not(.sapMBtnDisabled),
html.sap-desktop .sapMFooter-CTX .sapMBtnInner :not(.sapMBtnDisabled) {
	border-color:     @sapUiButtonLiteBorderColor;
}

.sapMIBar-CTX .sapMBtnTransparent:not(.sapMBtnDisabled):not(.sapMToggleBtnPressed) {
	text-shadow:      none;
	border-color:     @sapUiButtonLiteBorderColor;
}

/* active transparent button in a footer */
.sapMIBar-CTX.sapMFooter-CTX :not(.sapMBtnDisabled) {
	.sapMBtnTransparent.sapMBtnActive {
		background-color: @sapUiButtonLiteActiveBackground;
		color: @sapUiButtonActiveTextColor;
		border-color: @sapUiButtonLiteActiveBorderColor;
	}
}

.sapMIBar-CTX .sapMBtnDisabled,
.sapMIBar-CTX .sapMBtnDisabled .sapMBtnContent > .sapMBtnIcon {
	color: @sapUiButtonHeaderDisabledTextColor;
	text-shadow: none;
}

.sapMIBar-CTX.sapMHeader-CTX :not(.sapMBtnDisabled) > .sapMBtnActive,
.sapMIBar-CTX.sapMFooter-CTX :not(.sapMBtnDisabled) > .sapMBtnActive {
	background-color: @sapUiButtonActiveBackground;
	color: @sapUiButtonActiveTextColor;
	text-shadow: none;
}

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

/* transparent Toolbar Context */
.sapMTB-Transparent-CTX .sapMBtnDefault {
	background-image: none;
	background: @sapUiButtonLiteBackground;
}
.sapMTB-Transparent-CTX .sapMBtn:hover > .sapMBtnDefault.sapMBtnHoverable {
	background: @sapUiButtonLiteHoverBackground;
}

/* ------------------------------------------------ */
/* 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: @sapUiContentBadgeBackground;
			border-color: @sapUiContentBadgeBackground;
			color: @sapUiContentBadgeTextColor;
		}
	}
}

.sapUiSizeCompact {
	.sapMBtn {
		.sapMBadgeTopRight.sapMBadge {
			&.sapMBtnIconFirst:not(.sapMBtnText) {
				padding: 0 0.4375rem;
			}
			.sapMBadgeIndicator {
				line-height: 2rem;
				display: inline-block;
				position: relative;
				top: 0.25rem;
				right: -0.25rem;
				padding-right: 0.0625rem;

			}
		}
	}
}