:host(:not([hidden])) {
    display: inline-block;
}

:host {
    width: 100%;
    min-width: 15.5rem;
    height: 100%;
}

:host([desktop]) .ui5-carousel-item:focus,
.ui5-carousel-item:focus-visible {
    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	outline-offset: -1px;
}

.ui5-carousel-root {
    height: inherit;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--ui5_carousel_background_color_translucent);
}

.ui5-carousel-background-solid {
    background: var(--ui5_carousel_background_color_solid);
}

.ui5-carousel-background-transparent {
    background: transparent;
}

.ui5-carousel-viewport {
    width: 100%;
    height: inherit;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding: 1px;
    flex: 1;
    min-height: 0;
}

.ui5-carousel-viewport.ui5-carousel-viewport--single {
    align-items: center;
}

.ui5-carousel-content {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    transition: transform 0.5s cubic-bezier(.46, 0, .44, 1);
    will-change: transform;
}

.ui5-carousel-content.ui5-carousel-content-no-animation {
    transition: none;
}

.ui5-carousel-content.ui5-carousel-content-has-navigation {
    height: calc(100% - 1rem);
}

.ui5-carousel-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    box-sizing: border-box;
}

.ui5-carousel-item--hidden {
	transition: visibility 0.5s linear;
    will-change: visibility;
	visibility: hidden;
}

.ui5-carousel-navigation-arrows {
    width: 100%;
    padding: 0 0.5rem;
    position: absolute;
    top: calc(50% - var(--ui5_carousel_button_size) / 2);
    left: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
	pointer-events: none;
}

.ui5-carousel-navigation-wrapper {
    width: 100%;
    height: 2.75rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.ui5-carousel-navigation-wrapper-bg-solid {
    background: var(--sapPageFooter_Background);
}

.ui5-carousel-navigation-wrapper-bg-translucent {
    background: var(--ui5_carousel_background_color_translucent);
}

.ui5-carousel-navigation-wrapper-bg-transparent {
    background: transparent;
}

.ui5-carousel-navigation-wrapper-border-solid {
    border-top: var(--sapElement_BorderWidth) solid var(--sapList_BorderColor);
}

.ui5-carousel-navigation-wrapper.ui5-carousel-navigation-with-buttons {
    height: 3.5rem;
}

.ui5-carousel-navigation-button {
	width: var(--ui5_carousel_button_size);
	height: var(--ui5_carousel_button_size);
	border-radius: 50%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	display: flex;
	padding: 0 0.5rem;
	border: 1px solid var(--sapButton_Hover_BorderColor);
	background: var(--sapButton_Background);
	color: var(--sapButton_TextColor);
	cursor: pointer;
	pointer-events: all;
}

.ui5-carousel-navigation-button:hover {
	background: var(--sapButton_Hover_Background);
	border: 1px solid var(--sapButton_Hover_BorderColor);
	color: var(--sapButton_Hover_TextColor);
}

.ui5-carousel-navigation-button:active {
	background-color: var(--sapButton_Active_Background);
	border-color: var(--sapButton_Active_BorderColor);
	outline-offset: 1px;
	color: var(--sapButton_Active_TextColor);
	box-shadow: none;
}

.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button {
    box-shadow: var(--sapContent_Shadow1);
}

.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:active {
    box-shadow: var(--ui5_carousel_navigation_button_active_box_shadow);
}

.ui5-carousel-navigation-button--hidden {
    visibility: hidden;
    padding: 0;
}

.ui5-carousel-navigation {
    width: 9rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui5-carousel-navigation:empty {
    width: 1rem;
}

.ui5-carousel-navigation-dot {
    box-sizing: border-box;
    width: var(--ui5_carousel_inactive_dot_size);
    height: var(--ui5_carousel_inactive_dot_size);
    margin: var(--ui5_carousel_inactive_dot_margin);
    border-radius: 50%;
    background-color: var(--ui5_carousel_inactive_dot_background);
    border: var(--ui5_carousel_inactive_dot_border);
    transition: background-color .1s ease-in;
}

.ui5-carousel-navigation-dot.ui5-carousel-navigation-dot--active {
    width: .5rem;
    height: .5rem;
    margin: 0 .25rem;
    background-color: var(--ui5_carousel_active_dot_background);
    border: var(--ui5_carousel_active_dot_border);
}

.ui5-carousel-navigation-text {
    font-family: var(--sapFontFamily);
    font-size: var(--sapFontSize);
    font-weight: normal;
    color: var(--sapPageFooter_TextColor);
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}