:host {
	background: var(--_ui5_slider_handle_background);
	border: var(--_ui5_slider_handle_border);
	border-radius: var(--_ui5_slider_handle_border_radius);
	position: absolute;
	outline: none;
	height: var(--_ui5_slider_handle_height);
	width: var(--_ui5_slider_handle_width);
	box-sizing: var(--_ui5_slider_handle_box_sizing);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
	top: 0;
	cursor: pointer;
	margin-inline-start: calc(var(--_ui5_slider_handle_width) / -2 );
	top: 50%;
	transform: translateY(-50%);
}

:host(:focus) {
	outline: var(--ui5_slider_handle_outline);
	outline-offset: var(--ui5_slider_handle_outline_offset);
	z-index: 6;
}

:host(:hover),
:host([hovered]) {
	background: var(--_ui5_slider_handle_hover_background);
	border: var(--_ui5_slider_handle_hover_border);
}

.ui5-slider-handle-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	outline: none;
}

[slider-icon] {
	display: var(--_ui5_slider_handle_icon_display);
	color: var(--sapContent_Selected_ForegroundColor);
	width: var(--_ui5_slider_handle_icon_size);
	height: var(--_ui5_slider_handle_icon_size);
}

:host(:focus),
:host([active]),
:host(:active) {
	[slider-icon] {
		display: none;
	}

	background-color: var(--_ui5_slider_handle_background_focus);
	border: var(--_ui5_slider_handle_focus_border);
}

:host([orientation="Vertical"]) {
	transform: rotate(90deg);
}