.mux-mirror-control-button {
  --media-button-icon-width: var(--media-control-height, 24px);
  --media-button-icon-height: var(--media-control-height, 24px);
  --media-button-padding: 6px;
  border-radius: 3px;
}

.video-mirror-transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: rgb(10 10 10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

[data-video-variant-switching] .video-mirror-transition-overlay {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0ms;
}

[data-controller~="video-mirror"]:fullscreen,
[data-controller~="video-mirror"]:-webkit-full-screen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: rgb(10 10 10);
}

.video-mirror-transition-frame {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-mirror-transition-overlay[data-frame-captured] .video-mirror-transition-frame {
  display: block;
}

.video-mirror-transition-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255 255 255 / 0.72);
}

.video-mirror-transition-overlay[data-frame-captured] .video-mirror-transition-fallback {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

[data-modal-target="panel"]:has(#modal_content [data-modal-theme="dark"]) {
  border-color: rgb(38 38 38);
  background: rgb(10 10 10);
}

[data-modal-target="panel"]:has(#modal_content [data-modal-theme="dark"]) [data-modal-grabber-bar] {
  background-color: rgb(115 115 115);
}

[data-modal-target="panel"]:has(#modal_content [data-modal-theme="dark"]) [data-modal-desktop-header] {
  border-color: rgb(255 255 255 / 0.3);
}

[data-modal-target="panel"]:has(#modal_content [data-modal-theme="dark"]) [data-modal-mobile-header] {
  border-color: rgb(255 255 255 / 0.3);
}

[data-modal-target="panel"]:has(#modal_content [data-modal-theme="dark"]) [data-modal-desktop-header] button {
  color: rgb(255 255 255 / 0.3);
}

[data-modal-target="panel"]:has(#modal_content [data-modal-theme="dark"]) [data-modal-desktop-header] button:hover {
  color: rgb(17 24 39);
}

[data-modal-target="panel"]:has(#modal_content [data-modal-theme="dark"]) [data-modal-target="title"] {
  color: rgb(255 255 255);
}

.profile-menu-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

@media (min-width: 640px) {
  .profile-menu-profile-panel {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}