:root {
  --titlebar-background-color: #030303;
  --menu-bar-height: 36px;
}

title-bar {
  -webkit-app-region: drag;
  box-sizing: border-box;

  position: fixed;
  top: 0;
  z-index: 10000000;

  width: 100%;
  height: var(--menu-bar-height, 36px);

  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;

  color: #f1f1f1;
  font-size: 14px;
  padding: 4px 12px;
  padding-left: var(--offset-left, 12px);
  background-color: var(--titlebar-background-color, #030303);
  user-select: none;

  transition: opacity 200ms ease 0s, background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s;
}

menu-button {
  -webkit-app-region: none;

  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;

  padding: 2px 8px;
  border-radius: 4px;

  cursor: pointer;
}
menu-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

menu-panel {
  position: fixed;
  top: var(--y, 0);
  left: var(--x, 0);

  max-height: calc(100vh - var(--menu-bar-height, 36px) - 16px - var(--y, 0));

  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;

  overflow: auto;
  padding: 4px;
  border-radius: 8px;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--titlebar-background-color, #030303) 50%, rgba(0, 0, 0, 0.1));
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.2);

  z-index: 0;
  opacity: 0;
  transform: scale(0.8);
  transform-origin: top left;

  transition: opacity 200ms ease 0s, transform 200ms ease 0s;
}
menu-panel[open="true"] {
  pointer-events: all;
  opacity: 1;
  transform: scale(1);
}

menu-item {
  -webkit-app-region: none;
  min-height: 32px;
  height: 32px;

  display: grid;
  grid-template-columns: 32px 1fr minmax(32px, auto);
  justify-content: flex-start;
  align-items: center;

  border-radius: 4px;
  cursor: pointer;
}
menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

menu-item > menu-icon {
  height: 32px;
  padding: 4px;

  box-sizing: border-box;
}

menu-separator {
  min-height: 1px;
  height: 1px;
  margin: 4px 0;

  background-color: rgba(255, 255, 255, 0.2);
}

/* classes */

.title-bar-icon {
  height: calc(100% - 8px);
  object-fit: cover;
  margin-left: -4px;
}

/* youtube-music style */

ytmusic-app-layout {
  margin-top: var(--menu-bar-height, 36px) !important;
}

ytmusic-app-layout>[slot=nav-bar], #nav-bar-background.ytmusic-app-layout {
  top: var(--menu-bar-height, 36px) !important;
}
#nav-bar-divider.ytmusic-app-layout {
  top: calc(var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)) !important;
}
ytmusic-app[is-bauhaus-sidenav-enabled] #guide-spacer.ytmusic-app,
ytmusic-app[is-bauhaus-sidenav-enabled] #mini-guide-spacer.ytmusic-app {
  margin-top: calc(var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)) !important;
}

ytmusic-app-layout>[slot=player-page] {
  margin-top: var(--menu-bar-height);
  height: calc(100vh - var(--menu-bar-height) - var(--ytmusic-nav-bar-height) - var(--ytmusic-player-bar-height)) !important;
}

ytmusic-guide-renderer {
  height: calc(100vh - var(--menu-bar-height) - var(--ytmusic-nav-bar-height)) !important;
}