: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;
  -webkit-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: 0;
  }
}

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

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