:host {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}

:host([_square]) {
    height: 0;
    padding-top: 100%;
}

.ui5-media-gallery-item-root {
    width: 100%;
    height: 100%;
    display: flex;
}

:host([_square]) .ui5-media-gallery-item-root {
    position: absolute;
    top: 0;
    left: 0;
}

:host([layout="Wide"]) .ui5-media-gallery-item-root {
    align-items: center;
}

:host([_thumbnail-design]) .ui5-media-gallery-item-root {
    border: var(--_ui5_media_gallery_thumbnail_border);
    box-sizing: border-box;
}

:host([_interactive]) .ui5-media-gallery-item-root {
    cursor: pointer;
}

/* hover */
:host([_thumbnail-design]:not([disabled]):not([selected])) .ui5-media-gallery-item-root:hover {
    border-color: var(--sapTile_Interactive_BorderColor);
    background: var(--sapList_Hover_Background);
}

/* focused */
.ui5-media-gallery-item-root:focus {
	outline: var(--_ui5_media_gallery_thumbnail_focus_outline);
	outline-offset: -1px;
}

/* selected */
:host([_thumbnail-design][selected]) .ui5-media-gallery-item-root {
    border: var(--_ui5_media_gallery_thumbnail_selected_border);
}

/* selected focused */
:host([_thumbnail-design][selected]) .ui5-media-gallery-item-root:focus {
    outline-offset: -3px;
}

.ui5-media-gallery-item-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

:host([layout="Wide"]) .ui5-media-gallery-item-wrapper {
    z-index: 1;
}

:host([layout="Wide"]:not([_thumbnail-design])) .ui5-media-gallery-item-wrapper {
    height: calc(100% / 16 * 9);
}

/* resource not found icon */
[ui5-icon] {
    position: absolute;
    width: 4.5rem;
    height: 4.55rem;
    align-self: center;
}

.ui5-media-gallery-item-mask-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

:host(:not([_thumbnail-design])) .ui5-media-gallery-item-mask-layer {
    z-index: 2;
    background: var(--sapBaseColor);
    mix-blend-mode: multiply;
    opacity: 0.2;
    box-shadow: var(--_ui5_media_gallery_item_overlay_box_shadow);
    pointer-events: none;
}

:host(:not([_thumbnail-design])[layout="Wide"]) .ui5-media-gallery-item-mask-layer {
    z-index: 0;
}

/* disabled state */
:host([disabled]) .ui5-media-gallery-item-mask-layer {
    z-index: 2;
    background: var(--sapContent_ImagePlaceholderBackground);
    opacity: 0.5;
    cursor: default;
}

/* stretch the slotted thumbnails and videos */
::slotted([slot^=thumbnail]),
:host([layout="Wide"]) ::slotted(*) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* fit the slotted images within the host container,
preserving their proportions */
::slotted(*) {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
}