/* One vector play mark for product covers, thumbnails and administrator media. */
.murci-play-mark {
    --murci-play-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: var(--murci-play-size);
    height: var(--murci-play-size);
    box-sizing: border-box;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 50%;
    background: rgb(20 24 32 / 88%);
    color: #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: background-color 160ms ease, transform 160ms ease;
}
.murci-play-mark::before {
    content: '';
    display: block;
    width: 58%;
    height: 58%;
    margin-left: 4%;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.4c-1-.6-2.2.1-2.2 1.2v10.8c0 1.1 1.2 1.8 2.2 1.2l9.3-5.4c1-.6 1-1.9 0-2.5L8.5 5.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.4c-1-.6-2.2.1-2.2 1.2v10.8c0 1.1 1.2 1.8 2.2 1.2l9.3-5.4c1-.6 1-1.9 0-2.5L8.5 5.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.murci-video-thumbnail__icon { --murci-play-size: 28px; }
.murci-video-card .murci-play-mark { --murci-play-size: 40px; }
@media (hover: hover) and (pointer: fine) {
    .murci-product-video__play:hover .murci-play-mark,
    .murci-video-thumbnail:hover .murci-play-mark,
    .murci-video-card .uk-card-media:hover .murci-play-mark {
        background: rgb(20 24 32 / 98%);
        transform: translate(-50%, -50%) scale(1.05);
    }
}
@media (prefers-reduced-motion: reduce) {
    .murci-play-mark { transition: none; }
}