@import url(volume_slider.css);

#MainContents
{
  width: *;
  height: *;
}

#StatusBar
{
  background: color(color-statusbar-background);
  flow: horizontal;
  vertical-align: middle;
  color: color(color-ui-text-primary);
  padding: 0.2em 1em;
  border-top: 1px solid color(color-statusbar-border);
  font-family: var(font-ui), Arial, sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.2em;
  height: 1.9rem;
}

#StatusText
{
  width: *;
  text-align: right;
  display: block;
  vertical-align: middle;
  height: 1.2em;
  padding: 0.2em;
}

#StatusBar #volumeSeparator
{
  display: block;
  width: 1dip;
  height: 1.2em;
  margin: 0 0.6em;
  vertical-align: middle;
  background: color(color-statusbar-border);
}

#StatusBar #volumeAnchor
{
  display: block;
  flow: horizontal;
  vertical-align: middle;
  height: *;
}

#StatusBar #volumeSlider
{
  display: block;
  position: relative;
  width: max-content;
  height: max-content;
  flow: vertical;
  vertical-align: middle;
}

#StatusBar #audioVolume
{
  style-set: volume-slider-control;
  width: 9em;
  position: relative;
  z-index: 1;
  vertical-align: middle;
  margin: 3dip 0;
}

#StatusBar #volumeIcon,
#StatusBar #volume,
#StatusBar #renderer,
#StatusBar #dockedMode,
#StatusBar #gpuCommandSynchronization
{
  border: 1px solid transparent;
  border-radius: 4dip;
  padding: 0.2em 0.4em;
  display: block;
  height: 1.2em;
  vertical-align: middle;
}

#StatusBar #volume:hover,
#StatusBar #volumeIcon:hover,
#StatusBar #renderer.interactive:hover,
#StatusBar #dockedMode:hover,
#StatusBar #gpuCommandSynchronization:hover
{
  border: 1px solid color(color-statusbar-hover-border);
  background: color(color-accent-soft);
}

#StatusBar #volume
{
  width: max-content;
  padding: 0.2em 0;
  white-space: nowrap;
  text-align: left;
}

#StatusBar #volumeIcon svg
{
  size: 1.2em;
  display: block;
  fill: none;
  stroke: color(color-ui-text-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

#StatusBar #volumeReadout
{
  display: block;
  flow: horizontal;
  width: 2.8em;
  height: *;
  vertical-align: middle;
}

#StatusBar #volumeIcon.muted .sound-waves
{
  visibility: hidden;
}

.main-contents-panel
{
  width: *;
  height: *;
  display: none;
}

#PausePanel
{
  background: color(color-pause-panel-background);
  color: color(color-ui-text-primary);
  overflow: hidden;
}

#PausePanel .pause-panel-container
{
  width: *;
  height: *;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
}

#PausePanel .pause-panel-title
{
  font-family: var(font-ui), Arial, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

#PausePanel .pause-panel-subtitle
{
  font-family: var(font-ui), Arial, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: color(color-ui-text-muted);
  margin: 0;
}

rombrowser
{
  display: block;
  width: *;
  height: *;
  padding: 0.8rem 1.2rem 0.5rem;
  margin: 0;
  background: color(color-main-background);
}

rombrowser .games-title
{
  flow: horizontal;
}

rombrowser .buttons-container
{
  padding: 0.2rem 0 0;
}

rombrowser .config-button svg
{
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

rombrowser .config-button .outline
{
  fill: color(color-ui-text-primary);
}

rombrowser .config-button:hover .outline
{
  fill: color(color-ui-text-primary);
}

rombrowser .config-button
{
  padding: 0.3rem;
  border: 1px solid color(color-card-border);
  border-radius: 6px;
  background-color: color(color-card-background);
}

rombrowser .config-button:hover
{
  background-color: color(color-accent-soft);
  border-color: color(color-accent);
}

rombrowser .games-title h1
{
  font-family: var(font-ui), Arial, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: color(color-ui-text-primary);
  padding: 0 0 0.8rem;
  margin: 0;
  width:*
}

rombrowser .games-grid
{
  height: *;
  flow:horizontal-wrap;
  border-spacing: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}

rombrowser .games-grid[data-size="1"]
{
  border-spacing: 0.5rem;
}

rombrowser .rom-icon
{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 5px;
  pointer-events: none;
}

rombrowser .rom-card-content
{
  width: 100%;
  height: 100%;
  pointer-events: none;
}

rombrowser .rom-card
{
  cursor: pointer;
  border-radius: 10px;
  border: 3px solid color(color-card-border);
  background-color: color(color-card-background);
  context-menu: selector(menu#RomCardContextMenu);
  transition: border-color linear 120ms;
}

rombrowser .rom-card:hover
{
  border-color: color(color-card-border-hover);
}

rombrowser .rom-card:visited
{
  border: 3px solid color(color-accent);
  box-shadow: 0 0 10px rgba(47, 128, 255, 0.45);
  cursor: pointer;
}

rombrowser .games-grid[data-size="1"] .rom-card
{
  width: 6rem;
  height: 6rem;
}

rombrowser .games-grid[data-size="2"] .rom-card
{
  width: 8rem;
  height: 8rem;
}

rombrowser .games-grid[data-size="3"] .rom-card
{
  width: 10rem;
  height: 10rem;
}

rombrowser .games-grid[data-size="4"] .rom-card
{
  width: 13rem;
  height: 13rem;
}

#LoadingPanel .loading-container
{
  width: *;
  height: *;
  flow: vertical;
  background-color: black;
  color: white;
  overflow: hidden;
  text-align: center;
}

#LoadingCornerLogo
{
  horizontal-align: left;
  padding: 1.3rem;
}

#LoadingPanel .loading-main
{
  height: *;
  flow: horizontal;
}

#LoadingGameIcon
{
  margin-left: *;
  margin-top: *;
  margin-bottom: *;
  margin-right: 2rem;
}

#loadingText
{
  font-size: 1.4em;
  color: white;
  margin-bottom: 0.6rem;
}

#LoadingPanel .loading-text-column
{
  margin-right: *;
  margin-top: *;
  margin-bottom: *;
}

#LoadingPanel .loading-main.no-game-icon .loading-text-column
{
  margin-left: *;
  text-align: center;
}

#LoadingPanel .loading-main.no-game-icon .loading-progress-wrap
{
  width: 20rem;
}

#LoadingCornerBanner
{
  horizontal-align: right;
  padding: 1rem;
}

#LoadingPanel .loading-text
{
  font-size: 2em;
  margin: 0.5* 0;
}

#LoadingPanel .loading-progress-track
{
  height: 0.55rem;
  border-radius: 999px;
  background-color: #18242f;
  overflow: hidden;
}

#LoadingPanel .loading-progress-fill
{
  height: *;
  width: 0*;
  border-radius: 999px;
  background-color: #00d4ff;
  background-image: linear-gradient(90deg, #00b8e8 0*, #33eeff 0.5*, #00b8e8 *);
  background-size: * *;
  transition: width 0.15s ease-out;
}

#LoadingPanel .loading-progress-fill.building
{
  background-image: linear-gradient(90deg, #00a3cc 0*, #55f0ff 0.45*, #00a3cc 0.95*);
  background-size: 2* *;
  animation: loading-bar-build-shimmer 1s linear infinite;
}

#LoadingPanel .loading-progress-fill.indeterminate
{
  width: 0.42*;
  animation: loading-bar-wait-pulse 0.85s ease-in-out infinite;
}

@keyframes loading-bar-build-shimmer {
  0* { background-position: 0* 0; }
  * { background-position: * 0; }
}

@keyframes loading-bar-wait-pulse {
  0*, * { opacity: 0.5; }
  0.5* { opacity: 1; }
}

#LoadingPanel .loading-text > text
{
  display: inline-block;
}

.nx-fullscreen-hide
{
  display: none !important;
}

ul#menu-bar
{
  margin: 0;
  padding: 0.2em 0.5em;
  background: color(color-menubar-background);
  color: color(color-ui-text-primary);
  border-bottom: 1px solid color(color-menubar-border);
  font-family: var(font-ui), Arial, sans-serif;
  font-size: 0.95em;
  font-weight: 400;
  flow: horizontal;
}

ul#menu-bar > li
{
  padding: 0.2em 0.6em;
  margin: 0;
  white-space: nowrap;
  width: max-content;
  display: block;
  flow: horizontal;
  border-radius: 5px;
  position: relative;
}

ul#menu-bar > li:hover
{
  background: color(color-menubar-background-hover);
}

ul#menu-bar:focus > li:current,
ul#menu-bar > li:owns-popup {
  background-color: color(color-menubar-background-active);
  border-radius: 5px;
}

ul#menu-bar caption u,
menu li .menu-item-label u
{
  text-decoration: none;
}

[data-menu-mnemonics="1"] ul#menu-bar caption u,
[data-menu-mnemonics="1"] menu li .menu-item-label u,
ul#menu-bar > li:owns-popup caption u,
menu[window-state="shown"] li .menu-item-label u,
menu[window-state="shown"] caption u
{
  text-decoration: underline;
}

menu
{
  behavior:menu;
  flow: vertical;
  display:none;
  margin:0;
  padding: 0.35em 0;
  min-width: 14em;
  max-width:max-content;
  background: color(color-menu-popup-background);
  color: color(color-ui-text-primary);
  border: 1px solid color(color-menu-popup-border);
  border-radius: 6px;
  box-shadow: 0 0.25em 0.75em color(color-menu-popup-shadow);
}

ul#menu-bar menu
{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  z-index: 10000;
}

@media (menu-animation-supported) {
   menu {
     popup-animation: popup-animation(type:blend,duration:100ms);
   }
}

menu menu
{
  max-width: max-content;
}

ul#menu-bar menu li
{
  position: relative;
}

ul#menu-bar menu menu
{
  left: 100%;
  top: 0;
  border-top: 1px solid color(color-menu-popup-border);
}

menu li
{
  width:*;
  display:block;
  flow:horizontal;
  vertical-align:middle;
  foreground-repeat: no-repeat;
  foreground-position: left 2px top 50%;
  padding: 0.4em 1.75em 0.4em 1.1em;
  margin: 0 0.3em;
}

menu li .menu-item-label
{
  width: *;
  text-align: left;
}

menu li:has-child-of-type(menu) caption
{
  width: *;
  text-align: left;
}

menu li:current caption,
menu li:hover:owns-popup caption
{
  color: #f0f0f0;
}

menu li .menu-item-glyph
{
  width: 1.15em;
  min-width: 1.15em;
  max-width: 1.15em;
  min-height: 1.15em;
  max-height: 1.15em;
  margin: 0 0.55em 0 0;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  foreground-image: none;
}

menu li .menu-item-glyph.menu-item-glyph-spacer
{
  border: 1.5px solid transparent;
  border-radius: 3px;
  position: relative;
}

menu li .menu-item-glyph.menu-item-checkbox
{
  border: 1.5px solid var(color-ui-text-muted, #8c8c8c);
  border-radius: 3px;
  position: relative;
  foreground-image: none;
}

menu li .menu-item-glyph.menu-item-checkbox.checked
{
  border-color: var(color-ui-text-primary, #f0f0f0);
}

menu li .menu-item-glyph.menu-item-icon-svg
{
  border: none;
  width: 1.15em;
  height: 1.15em;
  min-width: 1.15em;
  max-width: 1.15em;
  padding: 0;
}

menu li .menu-item-glyph.menu-item-icon-svg svg
{
  width: 1.05em;
  height: 1.05em;
  display: block;
  vertical-align: middle;
}

menu li .menu-item-glyph.menu-item-icon-svg path,
menu li .menu-item-glyph.menu-item-icon-svg circle
{
  fill: currentColor;
}

menu li .menu-item-glyph.menu-item-icon-svg path[fill="none"],
menu li .menu-item-glyph.menu-item-icon-svg circle[fill="none"]
{
  fill: none;
  stroke: currentColor;
}

menu li .menu-item-glyph .menu-item-checkmark
{
  position: absolute;
  left: 0;
  top: 0;
  width: *;
  height: *;
  text-align: center;
  vertical-align: middle;
  font-size: 0.72em;
  line-height: 1.15em;
  color: var(color-ui-text-primary, #f0f0f0);
}

menu li:current .menu-item-glyph.menu-item-checkbox,
menu li:hover:owns-popup .menu-item-glyph.menu-item-checkbox
{
  border-color: #f0f0f0;
}

menu li:current .menu-item-glyph .menu-item-checkmark,
menu li:hover:owns-popup .menu-item-glyph .menu-item-checkmark
{
  color: #f0f0f0;
}

menu li .menu-accelerator
{
  width: max-content;
  margin-left: 2.5em;
  white-space: nowrap;
  text-align: right;
  color: color(color-menu-shortcut-text);
}

menu li .menu-accelerator:empty
{
  display: none;
  margin: 0;
  width: 0;
}

menu li:hover
{
  background: color(color-menuitem-background-hover);
  border-radius: 4px;
}

menu li:current,
menu li:hover:owns-popup
{
  background-color: color(color-accent);
  border-radius: 4px;
}

menu li:current .menu-item-label,
menu li:current .menu-accelerator,
menu li:hover:owns-popup .menu-item-label,
menu li:hover:owns-popup .menu-accelerator
{
  color: #f0f0f0;
}

menu li:disabled 
{ 
  color:graytext; 
  foreground-image: none; 
}

menu li:has-child-of-type(menu)
{
  foreground-image:url(stock:arrow-right);
  foreground-repeat: no-repeat;
  foreground-position: top 50% right 2px;
}

menu li:has-child-of-type(menu):rtl
{
  foreground-image:url(stock:arrow-left);
  foreground-repeat: no-repeat;
  foreground-position: top 50% left 2px;
}

menu hr
{
  display: block;
  height: 1px;
  margin: 0.4em 0.65em;
  border: none;
  background: color(color-menu-separator);
}

menu.context,
#RomCardContextMenu
{
  padding: 0.35em 0.25em;
  min-width: 16.5em;
  max-width: 24em;
  background: color(color-context-menu-background);
  color: color(color-context-menu-text);
  border: 1px solid color(color-context-menu-border);
  border-radius: 0.45em;
  box-shadow: 0 0.4em 1.1em color(color-context-menu-shadow);
  font-family: var(font-ui), Arial, sans-serif;
  font-size: 0.86em;
  font-weight: 400;
}

menu.context > li,
#RomCardContextMenu > li
{
  flow: horizontal;
  vertical-align: middle;
  padding: 0.42em 0.85em 0.42em 0.55em;
  margin: 0 0.15em;
  border-radius: 0.28em;
  color: color(color-context-menu-text);
}

menu.context > li:hover,
menu.context > li:current,
#RomCardContextMenu > li:hover,
#RomCardContextMenu > li:current
{
  background: color(color-context-menu-hover);
  color: #ffffff;
}

menu.context > li:disabled,
menu.context > li.disabled,
#RomCardContextMenu > li:disabled,
#RomCardContextMenu > li.disabled
{
  color: color(color-context-menu-muted);
  background: transparent;
  opacity: 0.55;
}

menu.context > li .menu-item-glyph,
#RomCardContextMenu > li .menu-item-glyph
{
  width: 1.25em;
  height: 1.25em;
  min-width: 1.25em;
  max-width: 1.25em;
  min-height: 1.25em;
  max-height: 1.25em;
  margin: 0 0.65em 0 0.1em;
  padding: 0;
  color: color(color-context-menu-text);
  vertical-align: middle;
  flow: horizontal;
  horizontal-align: center;
  vertical-align: middle;
}

menu.context > li .menu-item-glyph.menu-item-icon-svg svg,
#RomCardContextMenu > li .menu-item-glyph.menu-item-icon-svg svg
{
  width: 1.1em;
  height: 1.1em;
  display: block;
  margin: *;
}

menu.context > li .menu-item-label,
#RomCardContextMenu > li .menu-item-label
{
  width: *;
  height: *;
  text-align: left;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  line-height: 1.25em;
}

menu.context > hr,
#RomCardContextMenu > hr
{
  margin: 0.3em 0.7em;
  background: color(color-context-menu-separator);
}

menu.context > li:has-child-of-type(menu),
#RomCardContextMenu > li:has-child-of-type(menu)
{
  foreground-image: url(path: M 0 0 L 4 3 L 0 6);
  foreground-repeat: no-repeat;
  foreground-position: right 0.7em top 50%;
  foreground-size: 0.4em 0.55em;
  foreground-image-transformation: colorize(color(color-context-menu-muted));
  padding-right: 1.6em;
}