/* ================================= */
/* CSS for control sap.m/Token       */
/* Quartz High Contrast White 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 {
	border-radius: 0.25rem;
	padding-left: 0.3125rem;
	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);
}

html.sap-desktop .sapMToken {

	&.sapMTokenReadOnly,
	&.sapMTokenReadOnly:hover,
	&.sapMTokenReadOnly.sapMTokenSelected,
	&.sapMTokenReadOnly.sapMTokenSelected:hover {
		color: var(--sapContent_LabelColor);
		background: var(--sapField_ReadOnly_Background);
		border: var(--sapButton_BorderWidth) solid var(--sapField_ReadOnly_BorderColor);
	}
}

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;
	right: ~"calc(var(--sapButton_BorderWidth) * -1)";
}

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