.video-component{display:block;position:relative;border-radius:50%;padding-bottom:100%;cursor:pointer}.video-component:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;border-radius:inherit;z-index:1;background-color:#000;opacity:.2;transition:opacity var(--duration-default)}.video-component__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:12.6rem;height:12.6rem;border-radius:50%;color:var(--color-background-body);background-color:rgb(from var(--color-background-body) r g b / .5);-webkit-backdrop-filter:blur(27px);backdrop-filter:blur(27px);z-index:2;transition:opacity var(--duration-default)}.video-component__icon svg{width:4rem;margin-left:.8rem;transition:opacity var(--duration-default)}.video-component__icon svg:nth-child(2){position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0;opacity:0}.video-component video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:inherit;outline:.1rem solid currentColor;outline-offset:-.1rem}.video-component.is-playing:before{opacity:0}.video-component.is-playing .video-component__icon{opacity:0;pointer-events:none}.video-component.is-playing .video-component__icon svg:nth-child(1){opacity:0}.video-component.is-playing .video-component__icon svg:nth-child(2){opacity:1}@media(hover:hover)and (pointer:fine){.video-component:not(.is-playing):hover:before{opacity:.3}}.video-component--simple{padding-bottom:0;border-radius:0}.video-component--simple:before{display:none}.video-component--simple .video-component__icon{width:auto;height:auto;border-radius:0;background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.video-component--simple .video-component__icon{opacity:0;pointer-events:none}.video-component--simple .video-component__icon svg{filter:drop-shadow(0px 0px 4px rgba(0,0,0,.2))}.video-component--simple video{outline:none}@media(hover:hover)and (pointer:fine){.video-component--simple:hover .video-component__icon{opacity:1;pointer-events:auto}}
/*# sourceMappingURL=/cdn/shop/t/53/assets/component-video.css.map */