/* ============================ */
/* CSS for control sap.m/Token  */
/* Fiori 3 theme                */
/* ============================ */

@_sap_m_Token_TokenPadding: 0.5rem;
@_sap_m_Token_TokenCompactPadding: 0.25rem;
@_sap_m_Token_LeftPadding: 0.3125rem;
@_sap_m_Token_IconWidth: 1.75rem;
@_sap_m_Token_CompactIconWidth: 1.5rem;
@_sap_m_Token_DeleteIconHeight: 2.25rem;
@_sap_m_Token_DeleteIconCompactHeight: 1.625rem;

.sapMToken {
	padding-left: 0.3125rem;
	color: var(--sapTextColor);
	overflow: visible;
}

html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
	background: var(--sapButton_Selected_Hover_Background);
	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_Hover_BorderColor);
}

.sapMToken.sapMTokenReadOnly {
	color: var(--sapContent_LabelColor)
}

html.sap-desktop .sapMToken:focus {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	outline-offset: -0.1875rem;
}

html.sap-desktop .sapMToken.sapMTokenSelected:focus {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
}

.sapMTokenIcon {
	box-sizing: border-box;
	top: ~"calc((@{_sap_m_Token_TokenHeight} / 2) - (@{_sap_m_Token_DeleteIconHeight} / 2) - @{sapUiButtonBorderWidth})";
	width: @_sap_m_Token_IconWidth;
	height: @_sap_m_Token_DeleteIconHeight;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.sapUiSizeCompact .sapMTokenIcon {
	top: ~"calc((@{_sap_m_Token_TokenCompactHeight} / 2) - (@{_sap_m_Token_DeleteIconCompactHeight} / 2) - @{sapUiButtonBorderWidth})";
	width: @_sap_m_Token_CompactIconWidth;
	height: @_sap_m_Token_DeleteIconCompactHeight;
}

.sapMTokenIcon::before {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	line-height: 1;
}