.video-control{--scope-color-content:var(--color-content);--scope-color-surface:var(--color-surface);--icon-size:100%;background-color:var(--scope-color-surface);border:unset;border-radius:50%;cursor:pointer;font:inherit;padding:0;transition:background-color .25s cubic-bezier(0.645,0.045,0.355,1),color .25s cubic-bezier(0.645,0.045,0.355,1)}@media(hover:hover){.video-control:hover{--scope-color-content:var(--color-content-hover);--scope-color-surface:var(--color-surface-hover);--icon-scale:1.2}}.video-control--primary{--color-surface:transparent;--color-surface-hover:transparent;--color-surface-active:transparent;--color-surface-disabled:transparent;--color-content:var(--color-1);--color-content-hover:var(--color-11);--color-content-active:var(--color-1);--color-content-disabled:transparent;--color-border:transparent;--color-border-hover:transparent;--color-border-active:transparent;--color-border-disabled:transparent}.video-control--secondary{--color-surface:var(--color-1);--color-surface-hover:var(--color-11);--color-surface-active:unset;--color-surface-disabled:unset;--color-content:var(--color-6);--color-content-hover:var(--color-6);--color-content-active:unset;--color-content-disabled:unset;--color-border:unset;--color-border-hover:unset;--color-border-active:unset;--color-border-disabled:unset}.video-control--size-s{--icon-size:80%;height:44px;width:44px}@media only screen and (min-width:768px){.video-control--size-s{height:44px;width:44px}}.video-control--size-m{--icon-size:80%;height:60px;width:60px}@media only screen and (min-width:768px){.video-control--size-m{height:90px;width:90px}}.video-control--size-l{height:44px;width:44px}@media only screen and (min-width:768px){.video-control--size-l{height:100px;width:100px}}.video-control__icon{height:var(--icon-size);transition:transform .25s cubic-bezier(0.645,0.045,0.355,1),fill .25s cubic-bezier(0.645,0.045,0.355,1);width:var(--icon-size);fill:var(--scope-color-content);transform:scale(var(--icon-scale,1))}