@charset "utf-8";

:host { position: absolute; top: 0px; left: 0px; width: 64px; border-radius: 2px; }

.vivaldi-picture-in-picture-container { position: relative; cursor: pointer; overflow: hidden; height: 45px; }

.vivaldi-picture-in-picture-button { position: relative; display: flex; appearance: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMDAwMCI+CiAgICA8cGF0aCBkPSJNMTkgMTFoLTh2Nmg4di02em00IDhWNC45OEMyMyAzLjg4IDIyLjEgMyAyMSAzSDNjLTEuMSAwLTIgLjg4LTIgMS45OFYxOWMwIDEuMS45IDIgMiAyaDE4YzEuMSAwIDItLjkgMi0yem0tMiAuMDJIM1Y0Ljk3aDE4djE0LjA1eiIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgwVjB6Ii8+Cjwvc3ZnPgo="); background-size: 20px; background-repeat: no-repeat; background-position: center center; background-color: rgba(223, 222, 219, 0.55); filter: invert(1); border-radius: 4px; top: 12px; left: calc(50% - 15px); margin-left: 0px; margin-top: 0px; padding: 10px; border-width: 0px; width: 30px; height: 25px; transition: opacity 0.3s; cursor: pointer; outline: unset; }

.vivaldi-picture-in-picture-button.on { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuODciPgogICAgPHBhdGggZD0iTTE4IDRINHYxMGgxNFY0em00IDEyVjEuOThDMjIgLjg4IDIxLjEgMCAyMCAwSDJDLjkgMCAwIC44OCAwIDEuOThWMTZjMCAxLjEuOSAyIDIgMmgxOGMxLjEgMCAyLS45IDItMnptLTIgLjAySDJWMS45N2gxOHYxNC4wNXoiIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0ibm9uemVybyIvPgogICAgPHBhdGggZD0iTS0xLTNoMjR2MjRILTF6Ii8+CiAgPC9nPgo8L3N2Zz4="); background-color: rgba(223, 222, 219, 0.55); border-radius: 4px; }

.vivaldi-picture-in-picture-button:disabled { background-color: initial; opacity: 0.3; cursor: default; }

@keyframes fadeOut { 
  0% { opacity: 1; height: 45px; }
  99% { opacity: 0; height: 45px; }
  100% { opacity: 0; height: 0px; }
}

.vivaldi-picture-in-picture-container:not(:hover).transparent, .vivaldi-picture-in-picture-container.fullscreen { height: 0px; animation: 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running fadeOut; }

.vivaldi-picture-in-picture-container.initial { height: 0px; }