stremio-web/src/common/MetaItem/styles.less

.meta-item-container {
    position: relative;
    z-index: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-backgroundlight);
    cursor: pointer;

    .poster-image-container {
        position: relative;
        z-index: 0;

        .placeholder-image-container {
            position: absolute;
            top: 25%;
            right: 10%;
            bottom: 25%;
            left: 10%;
            z-index: 0;

            .placeholder-image {
                width: 100%;
                height: 100%;
                fill: var(--color-surfacelight20);
            }
        }

        .poster-image {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-origin: border-box;
        }

        .play-icon-container {
            position: absolute;
            top: 30%;
            width: 100%;
            height: 40%;
            z-index: 2;
            overflow: visible;
            visibility: var(--play-icon-visibility, collapse);
            filter: drop-shadow(0 0 0.5em var(--color-backgroundlight));

            .play-icon-background {
                fill: var(--color-surfacelighter);
            }

            .play-icon {
                fill: var(--color-primary);
            }
        }

        .progress-bar-container {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 3;
            height: 0.5em;
            background-color: var(--color-backgroundlighter);

            .progress {
                height: 100%;
                background-color: var(--color-primary);
            }
        }

        &:before {
            content: "";
            display: block;
        }
    }

    .title-bar-container {
        height: 3em;
        overflow: hidden;

        .title {
            display: inline-block;
            width: calc(100% - 3em);
            height: 3em;
            padding: 0 0.5em;
            line-height: 3em;
            color: var(--color-surfacelighter);
            overflow: hidden;
            word-break: break-all;
        }

        .menu-icon {
            display: inline-block;
            width: 3em;
            height: 3em;
            padding: 0.8em;
            fill: var(--color-surfacelighter);

            &:hover, &:global(.active) {
                background-color: var(--color-backgroundlighter);
            }
        }
    }

    &.poster-shape-square {
        .poster-image-container:before {
            padding-top: 100%;
        }
    }

    &.poster-shape-landscape {
        .poster-image-container:before {
            padding-top: calc(100% * var(--landscape-shape-ratio));
        }
    }

    &.poster-shape-poster {
        .poster-image-container:before {
            padding-top: calc(100% * var(--poster-shape-ratio));
        }
    }

    &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        display: block;
        pointer-events: none;
        border: var(--focusable-border-size) solid transparent;
        content: "";
    }

    &:hover, &:focus {
        .poster-image-container {
            .placeholder-image-container {
                .placeholder-image {
                    fill: var(--color-surfacelighter);
                }
            }

            .poster-image {
                filter: brightness(120%);
            }
        }

        &::after {
            border-color: var(--color-surfacelighter);
        }
    }
}

.menu-container {
    --box-shadow: 0 0 1.5em .2em var(--color-backgroundlight);

    .menu-items-container {
        min-width: 8em;
        max-width: 12em;
        background-color: var(--color-surfacelighter);

        .menu-item {
            font-size: 1.2em;
            padding: 0.5em;
            width: 100%;
            color: var(--color-backgrounddarker);
            cursor: pointer;

            &:hover, &:focus {
                background-color: var(--color-surfacelight);
            }
        }
    }
}