:host {
	height:100%;
}

:host,
.ui5-media-gallery-display-wrapper,
.ui5-media-gallery-display {
	width: 100%;
}

.ui5-media-gallery-root {
	width: inherit;
	height: inherit;
	background: var(--sapBaseColor);
	display: flex;
	flex-direction: column;
	position: relative;
}

:host([menu-vertical-align="Top"]) .ui5-media-gallery-root {
	flex-direction: column-reverse;
}

:host([effective-layout="Horizontal"]) .ui5-media-gallery-root {
	flex-direction: row-reverse;
}

:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root {
	flex-direction: row;
}

/* DISPLAY */

.ui5-media-gallery-display-wrapper {
	display: flex;
	justify-content: center;
	position: relative;
}

/* when all thumbnails shown, thumbnails vs. dispplay width is 1:3 proportion */
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-display-wrapper {
	flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
	flex-basis: 0;
}

.ui5-media-gallery-display {
	position:relative;
	margin: 1rem;
	display: flex;
	justify-content: center;
}

.ui5-media-gallery-display [ui5-media-gallery-item] {
	z-index: 1;
}

/* mobile platform */
[ui5-carousel] {
	width: calc(100% - 2rem);
}
[ui5-carousel]::part(item) {
	padding: 0;
	overflow: hidden;
}

/* THUMBNAILS */
.ui5-media-gallery-thumbnails-wrapper {
	margin-block: 1rem 0;
}
:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnails-wrapper {
	margin-block: 0 1rem;
}
:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnails-wrapper {
	margin-inline: 0 1rem;
}
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnails-wrapper {
	margin-inline: 1rem 0;
}

/* show all thumbnails in a single scrollable row */
:host([show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
}
/* show all thumbnails in a scrollable area with multiple columns */
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
	overflow-y: auto;
	overflow-x: hidden;
	flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
	flex-basis: 0;
}

.ui5-media-gallery-thumbnails-wrapper ul {
	height: 5rem;
	display: flex;
	flex-wrap: nowrap;
	padding-left: 0; /* disable browser default css */
	margin-top: 0; /* disable browser default css */
	margin-bottom: 0; /* disable browser default css */
	list-style-type: none; /* disable browser default css */
	padding-inline-start: 0; /* disable browser default css */
}

/* in horizontal layout, the menu is 1-4 vertical columns, depending on media size */
:host([effective-layout="Horizontal"]) ul {
	width: 5rem;
	flex-wrap: wrap;
}
/* two columns on M-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="M"]) ul {
	width: 10rem;
}
/* three columns on L-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="L"]) ul {
	width: 15rem;
}
/* four columns on XL-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="XL"]) ul {
	width: 20rem;
}

.ui5-media-gallery-thumbnail,
.ui5-media-gallery-overflow [ui5-button] {
	width: 4rem;
	height: 4rem;
	flex-shrink: 0;
}

.ui5-media-gallery-overflow [ui5-button] {
	background: var(--_ui5_media_gallery_overflow_btn_background);
	color: var(--_ui5_media_gallery_overflow_btn_color);
	border: var(--_ui5_media_gallery_overflow_btn_border);
}

.ui5-media-gallery-thumbnail,
.ui5-media-gallery-overflow {
	margin: 0 0 0 1rem;
}

:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnail,
:host([menu-vertical-align="Top"]) .ui5-media-gallery-overflow {
	margin: 1rem 0 0 1rem;
}

:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnail,
:host([effective-layout="Horizontal"]) .ui5-media-gallery-overflow {
	margin: 1rem 0 0 1rem;
}

:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnail,
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-overflow {
	margin: 1rem 1rem 0 0;
}