:host {
	width: var(--_ui5_product_switch_item_width);
	height: var(--_ui5_product_switch_item_height);
	margin: .25rem;
	border-radius: .25rem;
	box-sizing: border-box;
	background: var(--sapList_Background);
}

:host([selected]) .ui5-product-switch-item-root {
	background: var(--sapList_SelectionBackgroundColor);
	border: 0.125rem solid var(--sapList_SelectionBorderColor);
}

:host(:hover) .ui5-product-switch-item-root {
	background :var(--sapList_Hover_Background);
}

:host([selected]:hover) .ui5-product-switch-item-root {
	background: var(--sapList_Hover_SelectionBackground);
}

:host([active]) .ui5-product-switch-item-root,
:host([selected][active]) .ui5-product-switch-item-root {
	background: var(--sapList_Active_Background);
}

:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-icon,
:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title,
:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
	color:var(--sapList_Active_TextColor);
}

:host([desktop]) .ui5-product-switch-item-root:focus,
.ui5-product-switch-item-root:focus-visible {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	outline-offset:var(--_ui5_product_switch_item_outline_offset)
}

:host([desktop][active]) .ui5-product-switch-item-root:focus,
:host([active]) .ui5-product-switch-item-root:focus-visible {
	outline-color: var(--_ui5_product_switch_item_active_outline_color);
}

.ui5-product-switch-item-root {
	user-select: none;
	width: 100%;
	height: 100%;
	flex-direction: column;
	display: flex;
	align-items: center;
	text-decoration: none;
	outline: none;
	box-sizing: border-box;
	padding: .5rem;
	padding-top: .5rem;
	cursor: pointer;
	border: var(--_ui5_product_switch_item_border);
}

:host([selected]) .ui5-product-switch-item-root {
	padding: .375rem;
}

.ui5-product-switch-item-root .ui5-product-switch-item-icon {
	width: 3rem;
	height: 3rem;
	padding: .75rem;
	margin-bottom: .5rem;
	box-sizing: border-box;
	color: var(--sapContent_IconColor);
	pointer-events: none;
}

.ui5-product-switch-item-root .ui5-product-switch-item-image-placeholder {
	width: 3rem;
	height: 3rem;
	margin-bottom: .5rem;
}

.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
	display: flex;
	align-items: center;
	flex-direction: column;
	max-width: 10.25rem;
}

.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle,
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
	line-height: 1.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	pointer-events: none;
	text-align: center;
}

.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
	font-size:var(--sapFontHeader6Size);
	color:var(--sapGroup_TitleTextColor);
}

.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title:only-child {
	white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
	font-size:var(--sapFontSmallSize);
	color:var(--sapContent_LabelColor);
}

@media only screen and (max-width: 600px) {
	:host {
		margin: 0;
		width: 100%;
		width: 100%;
		max-width: 600px;
		height: 5rem;
		border-radius: 0;
	}

	.ui5-product-switch-item-root {
		padding: 0 1rem;
		flex-direction: row;
	}

	.ui5-product-switch-item-root {
		padding-top: 0;
	}

	.ui5-product-switch-item-root .ui5-product-switch-item-icon {
		padding: .875rem;
		color: var(--sapContent_NonInteractiveIconColor);
		margin: 0 .75rem 0 0;
	}

	.ui5-product-switch-item-root .ui5-product-switch-item-image-placeholder {
		margin: 0 .75rem 0 0;
	}

	.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
		align-items: flex-start;
		max-width: 100%;
	}

	.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
		max-width: calc(100% - 3.75rem); /* 100% width - (3rem for the icon + right margin)*/
	}


	.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle,
	.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
		line-height: normal;
	}

	.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
		font-size: var(--sapFontSize);
		padding-top: .75rem;
	}
}