.video-feed-module{background:var(--background);display:flow-root;.videos{.video-wrapper{background:linear-gradient(119deg,#e0e0e0 25%,#f0f0f0 37%,#e0e0e0 63%);color:#fff;cursor:pointer;height:100%;overflow:clip;position:relative;width:100%;&:before{background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.5))}&:after,&:before{content:"";inset:0;pointer-events:none;position:absolute}&:after{transition:background .15s}&.darken{&:after{background:rgba(0,0,0,var(--darken-opacity))}}.title{bottom:0;left:0;padding:var(--video-padding);position:absolute}.play-btn{align-items:center;background:var(--button-background);border:1px solid #fff;border-radius:50%;display:flex;height:var(--button-size);justify-content:center;left:50%;opacity:1;position:absolute;top:50%;translate:-50% -50%;width:var(--button-size);&.hide{opacity:0;transition:opacity .15s}i{border-bottom:12px solid transparent;border-left:20px solid #fff;border-top:12px solid transparent;display:block;height:0;width:0}}.additional-buttons{align-items:center;bottom:0;display:flex;flex-direction:column;gap:1rem;padding:var(--video-padding);position:absolute;right:0;.button-wrapper{align-items:center;display:flex;flex-direction:column;gap:.5rem;button{background:none;border-radius:50%;svg{height:var(--additional-button-size);width:var(--additional-button-size);&,*{transform-origin:center;transition:all .15s}}&:hover{svg{path{scale:1.1}}}&:active{svg{path{scale:.9}}}&[data-clicked=true]{svg{fill:#fff}}}}}.share-interface{cursor:default;display:flex;height:100%;position:absolute;top:100%;transition:background .3s;width:100%;z-index:2;.share-container{background:#fff;border-radius:15px 15px 0 0;color:#000;margin-top:auto;padding:.5rem;transition:translate .3s;translate:0 100%;width:100%}&.active{background:#00000094;top:0;.share-container{translate:0 0}}}video{aspect-ratio:9/16;display:block;height:auto;object-fit:cover;pointer-events:none;width:100%}}}}