/* Copyright ⓒ 2024 Bithead LLC. All rights reserved. */

/** Reset **/

/* padding: top right bottom left; */

@font-face {
  font-family: "ChicagoFLF";
  src: url("/boss/ChicagoFLF.ttf") format('truetype'); /* Safari, Android, iOS */
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th {
  margin: 0px;
  padding: 0px;
  border: 0px;
  /* Required for ChicagoFLF. Otherwise, it is blurry. */
  font-weight: normal;
}

html, body {
  /* transform: scale(0.7); /* 150% scale */
  transform-origin: 0 0; /* Ensure scaling from top-left corner */
}

hr {
  border: none;
  height: 1px;
  background-color: #000;
  margin: 20px 0px;
}

a {
  font-family: "Geneva";
  font-size: 16px;
  color: #222;
}

h1 {
  font-size: 20px;
  font-family: "ChicagoFLF";
}

h2 {
  font-size: 18px;
  font-family: "ChicagoFLF";
}
h3 {
  font-size: 16px;
  font-family: "ChicagoFLF";
}
h4 {
  font-size: 14px;
  font-family: "ChicagoFLF";
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  /* FIXME: This doesn't show offset border on right. Only bottom. */
  box-shadow: 1px 1px 0px 0px #000;
}
table th {
  font-size: 14px;
  font-family: "ChicagoFLF";
  text-align: left;
  padding: 4px;
  border-bottom: 1px solid #000;
}
table td {
  padding: 4px;

  font-family: "Geneva";
  font-size: 14px;
}

/* `.boundary` shows a double line under the header column */

/**
 * Provides separation between first row and border
 *
 * NOTE: first-row is required as the latter selector is NOT re-computed if the
 * column is added programmatically.
 **/
tr.first-row td,
table tr:has(th) + tr td {
  padding-top: 6px;
}
/* Provides separation between first row and double line */
tr.first-boundary-row td,
table tr.boundary:has(th) + tr td {
  padding-top: 10px;
}
table tr.boundary th {
  position: relative;
  padding-bottom: 4px;
}
table tr.boundary th::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  border-bottom: 1px solid #000;
}

/* Makes a column "row" look like a different type of header */
table .column-header {
  font-size: 14px;
  font-family: "ChicagoFLF";
  text-align: right;
  background-color: #ebebeb;
  border-bottom: none;
  border-right: 1px solid #000;
}

table tr.disabled td {
  color: #c0c0c0;
}

/* Fragments are used as templates. Hide them all by default. */
fragment {
  display: none;
}

body {
  background-color: #ebebeb;
}

.CodeMirror {
  height: auto !important;
  width: 100% !important;
}

/**
 * Some contexts set `resize` to none, such as in the `.fullscreen > .ui-window > .container`
 * context. This always ensures the CodeMirror editor allows resizing.
 *
 * Also, by default, CodeMirror editors should not be resiable.
 */
.resizable-editor .CodeMirror {
  resize: both;
}

#desktop {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #ebebeb;

  /* No scrollbars. Content may move outside of the viewport. */
  overflow: hidden;
}

/** Desktop Icons **/

/* Container for all desktop icons */
#desktop-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.desktop-icon {
  display: flex;
  flex-direction: column;

  width: 70px;
  cursor: pointer;
}

.desktop-icon span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;

  color: #000;
  font-family: "ChicagoFLF";
  font-size: 12px;
}

.desktop-icon img {
  width: 30px;
  height: 30px;
  margin: auto;

  /* Treats the container of the desktop-icon as the only draggable element.
   * If this isn't set, dragover and dragleave are called more than it needs to.
  pointer-events: none; */

  padding: 5px;
  border: 1px solid #000;
  border-radius: 5px;
  background-color: #fff;
}
.desktop-icon img.hovering {
  filter: invert(100%);
}

/** Dock **/

#os-dock {
  position: absolute;
  bottom: 0px;
  left: 0px;

  height: 22px;

  display: flex;
  /* left padding accounts for padding already added by menu */
  padding: 4px 10px 4px 10px;
  background-color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#os-dock > .close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  width: 18px;
  height: 18px;
}

#os-dock > .divider {
  width: 1px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #000;
}

#os-dock > .apps {
  display: flex;
  flex: 0 1 auto;
}

#os-dock .app-name {
  display: none;
  position: absolute;
  bottom: 26px;
  left: 0px;
  white-space: nowrap;

  color: #000;
  font-family: "ChicagoFLF";
  font-size: 12px;
  text-align: left;
  /* When the button is hovered, do not invert text color */
  filter: invert(100%);
}

#os-dock > .apps > .app-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  margin: 1px;
  height: 18px;
  width: 20px;

  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
}
#os-dock > .apps > .app-icon img {
  height: 16px;
  width: 16px;
}
#os-dock > .apps > .app-icon:hover {
  filter: invert(100%);
}

/** Custom UI App Menu **/

.ui-app-menu {
  padding: 10px;
  border: 1px solid #000;
  box-shadow: 1px 1px 0px 0px #000;
  background-color: #fff;
}

/** Modal **/

/* The overlay (modal), is shown over #desktop, os-bar, and windows. */
.ui-modal-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 1999;
}

.ui-modal-container {
  position: absolute;
  top: 150px;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  z-index: 2000; /* Above everything including overlay */
}

.ui-modal {
  outline: 1px solid #000;
  outline-offset: 2px;
  /* Ensures the outline does not overlap elements that are beside it */
  margin: 2px;
  /* Fills in the space between border and outline */
  box-shadow: 0px 0px 0px 2px #fff;
  background-color: #fff;
}

.ui-modal .title {
  text-align: center;
  font-family: "ChicagoFLF";
  font-size: 16px;
  color: #000;
  padding-bottom: 2px;
}

.ui-modal > .container {
  border: 3px solid #000;
  /* Bottom is 10px because all `ui-modal`s have `controls` on the bottom,
    `controls` have 10px padding on bottom. */
  padding: 10px 10px 0px 10px;
  font-family: "ChicagoFLF";
  font-size: 16px;
}
.ui-modal > .container .controls {
  padding-bottom: 10px;
}
.ui-modal > .container a {
  font-family: "ChicagoFLF";
  font-size: 16px;
}

/* Add space between messages in modal. */
.ui-modal > .container p.add-margin {
  margin-top: 20px;
}

/* Display exclamation mark to the left of modal message */
/* NOTE: .error will eventually have a 'bomb' icon. */
.ui-modal .error,
.ui-modal .exclamation {
  padding-left: 70px;
  background-image: url("/boss/img/exclamation-icon.svg");
  background-repeat: no-repeat;
  background-size: 50px auto;
  min-height: 50px;
}
.ui-modal .error.add-margin,
.ui-modal .exclamation.add-margin {
  margin-bottom: 20px;
}

.ui-modal .info {
  padding-left: 70px;
  background-image: url("/boss/img/info.svg");
  background-repeat: no-repeat;
  background-size: 50px auto;
  min-height: 50px;
}
.ui-modal .info > .message {
  font-family: "Geneva";
  font-size: 12px;
}

/* Small text displayed on bottom-left of modal window. Usually used
   in "About" pages. */
.ui-modal .footer a,
.ui-modal .footer {
  font-family: "Geneva";
  font-size: 8px;
  color: #000;
  margin-bottom: 2px;
}

/** Window **/

#desktop .ui-window {
  border: 1px solid #000;
  background-color: #fff;
  box-shadow: 1px 1px 0px 0px #000;
  position: absolute;
  /** For testing. This is set by OS.
  left: 10px;
  top: 10px;
  */
}

#desktop .ui-window .top {
  height: 22px;
  display: -webkit-flex;
  display: flex;
  border-bottom: 1px solid #000;
  background-position: center;
  /* TODO: The shade is too big */
  background-image: url("/boss/img/window-shade.svg");
  background-size: auto 38px;
  background-repeat: repeat-x;
  flex-shrink: 0;
  color: #000;
}
/* The `blurred` state is placed on the container for OS managed windows.
 * It's applied directly to the .ui-window for pre-rendered windows. */
#desktop .ui-window.blurred .top,
#desktop .blurred > .ui-window .top {
  background-image: none;
  color: #a5a5a5;
}

#desktop .ui-window .close-button {
  /* This has to be displayed as `block`. Using relative does not work.
     The hitbox does _not_ shift with where the element is visually. */
  display: block;
  margin-top: 2px;
  margin-left: 10px;
  width: 18px;
  height: 18px;
  background-image: url("/boss/img/close-button.svg");
  background-position: center;
  background-repeat: no-repeat;
}

#desktop .ui-window .title {
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  text-align: center; /* TODO: shouldn't this use flex content adjust center? */
  cursor: pointer;
}

#desktop .ui-window .title span {
  background-color: #fff;
  display: inline-block;
  /* left and right padding */
  padding: 2px 10px 0px 10px;
  font-family: "ChicagoFLF";
  font-size: 15px;
  /* This negates the `margin-left` value on `.close-button` so that the title
     is in the center. */
  margin-left: -10px;
}

#desktop .ui-window .zoom-button {
  position: relative;
  top: 2px;
  right: 10px;
  width: 18px;
  height: 18px;
  background-image: url("/boss/img/zoom-button.svg");
  background-position: center;
  background-repeat: no-repeat;
}

#desktop .ui-window .metadata {
  font-family: "Geneva";
  font-size: 10px;
  height: 14px;
  /* top right bottom left */
  padding: 5px 10px 5px 10px;
  border-bottom: 1px solid #000;
}

#desktop .ui-window .metadata-bottom {
  height: 2px;
  border-bottom: 1px solid #000;
}

/**
 * The ui-container wraps a ui-window and manages position, z-index, etc.
 * When fullscreen, it also manages width and height. This div is completely
 * managed by the OS. Therefore, do NOT wrap your ui-window in this container.
 *
 * NOTE: When making your window fullscreen by default, set fullscreen style
 * on ui-window. It will automatically be moved to the ui-container by the OS.
 */
#desktop .ui-container {
  position: absolute;
  /* NOTE: The top/left positions are managed by the OS. */
}

#desktop .ui-container.fullscreen {
  top: 26px;
  left: 0px;

  width: 100%;
  height: 100%;
}
#desktop .ui-container.fullscreen > .ui-window {
  border-left: 0px;
  border-right: 0px;
  border-top: 1px solid #000;
  border-bottom: 0px;
  width: 100%;
  /* NOTE: If this was 100%, it would be greater than the size of the window. It has to do with the
   * fact that the `top` is pushed down by N pixels (e.g. 26px). So it would need to be 100%-26px */
  height: calc(100% - 26px);
}
#desktop .ui-container.fullscreen > .ui-window > .container {
  /* Turn off resize control while in fullscreen mode */
  resize: none;
}

/**
 * `UIController`s may be embedded inside `UIWindow`s.
 *
 * The use case for `UIController`s:
 * - An application with a single `UIWindow`. e.g. a game may be a single
 *   application window. It simply replaces content depending on the state of
 *   the game.
 * - You have a large `UIController` and want to modularize components to make
 *   them easier to manage.
 *
 * `ui-controller` is declared here only for illustrative purposes. They are not
 * styled. However, their style may be controlled by the respective app.
 *
 * Anatomy of a UIController:
 * ```
 * <div class="container">
 *   <div class="ui-controller" id="search">
 *   <!-- controller -->
 *   <!-- content -->
 *   </div>
 * </div>
 * ```
 */
#desktop .ui-controller { }

#desktop .ui-controller > .container {
  padding: 10px;
  font-family: "Geneva";
  font-size: 16px;
}

/** Scroll Bar **/

::-webkit-scrollbar {
  width: 18px;
  height: 18px;
}
::-webkit-scrollbar-thumb {
  height: 18px;
  background-color: #fff;
  border: 1px solid #000;
}
::-webkit-scrollbar-track {
  background-color: #ededed;
}
/* Part of the track not covered by thumb */
::-webkit-scrollbar-track-piece {
}
::-webkit-scrollbar-track:horizontal {
  border-top: 1px solid #000;
}
::-webkit-scrollbar-track:vertical {
  border-left: 1px solid #000;
}
/* Where the two scrollbars meet */
::-webkit-scrollbar-corner {
  /* Add corner image */
}
::-webkit-scrollbar-button {
  background-color: #fff;
  display: block;
  border-bottom: 1px solid #000;
  height: 18px;
  width: 18px;
}
::-webkit-scrollbar-button:vertical:start {
  background-image: url("/boss/img/up-arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  border-left: 1px solid #000;
}
::-webkit-scrollbar-button:vertical:end {
  background-image: url("/boss/img/down-arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
::-webkit-scrollbar-button:horizontal:start {
  background-image: url("/boss/img/left-arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 0px;
}
::-webkit-scrollbar-button:horizontal:end {
  background-image: url("/boss/img/right-arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 0px;
}
::-webkit-resizer {
  background-image: url("/boss/img/scrollbar-resize-button.svg");
  background-position: center;
  background-repeat: no-repeat;
  /*
  border-top: 1px solid #000;
  border-left: 1px solid #000;*/
}
/* Prevent showing double buttons */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}

/** Window Container **/

/**
 * The container "contains" the content of the window.
 */

#desktop .ui-window > .container {
  padding: 10px;
  font-family: "Geneva";
  font-size: 16px;
  overflow: auto;
  /* Prevents window from being resized down any further */
  min-width: 300px;
  min-height: 40px;
}
#desktop .ui-window > .container.resizable {
  resize: both;
}
/* Some windows, like folder windows, should have no padding. */
#desktop .ui-window > .container.no-padding {
  padding: 0px;
}

/* Always show the vertical scrollbar */
#desktop .ui-window > .container.show-vertical-scrollbar {
  overflow-y: scroll;
}

/**
 * Component groups
 *
 * If you want to group all components together, as if to represent them as
 * one component, define the ui-window as a `group`. This removes borders
 * defined on all components, but adds a 1px gap between components as a way
 * to visually separate the components.
 *
 * This removes all padding, similar to `no-padding`.
 */
#desktop .ui-window > .container.group {
  padding: 0px;
}
/* Removes borders from direct descendants */
#desktop .ui-window > .container.group > * {
  border: none;
}
/* Removes all borders from components */
#desktop .ui-window > .container.group .ui-list-box,
#desktop .ui-window > .container.group .CodeMirror {
  border: none;
}
#desktop .ui-window > .container.group .hbox,
#desktop .ui-window > .container.group .vbox {
  gap: 1px;
  background-color: #000;
}

/**
 * OS Bar
 *
 * This is displaye at the top of the page and provides all controls to operate
 * with the OS.
 **/
#os-bar {
  display: flex;
  align-items: stretch;
  /* left padding accounts for padding already added by menu */
  padding: 4px 12px 4px 12px;
  background-color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-family: "ChicagoFLF";
  font-size: 12px;
  height: 18px;
}

/* All images must be the same size */
#os-bar img {
  width: 14px;
  height: 14px;
}
/* Displays all menus for OS or the active application */
#os-bar-menus {
  flex-grow: 1;
  display: flex;
}
/* Displays list of application icons that are running in the background */
#os-bar-apps {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 auto;
  margin-right: 10px;
}
/* The app icon displays the app window. */
#os-bar-apps .app-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  margin: 1px;
  height: 14px;
  width: 18px;

  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
}
#os-bar-apps .app-icon img {
  height: 12px;
  width: 12px;
}
#os-bar-apps .app-icon.active {
  filter: invert(100%);
}
#os-bar-apps .app-icon:hover {
  border: 1px solid #000;
}

/* System clock */
#clock {
  flex: 0 1 auto;
  margin-top: 2px;
}

/* Display server status */
#server-status {
  flex: 0 1 auto;
  margin-top: 2px;
  margin-left: 6px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#server-status .indicator {
  height: 10px;
  width: 10px;

  border-radius: 5px;
  background-color: orange;
}

/** Buttons **/

/* Default: The default button option. Will activate when return key tapped. */

button.default {
  border: 1px solid #000;
  border-radius: 4px;
  outline: 2px solid #000;
  outline-offset: 1px;
  /* Ensures the outline does not overlap elements that are beside it AND
   * expands the button to its full height when squeezed by other elements. */
  margin: 3px;
  color: #000;
  background-color: #fff;
  font-family: "ChicagoFLF";
  font-size: 16px;
  padding: 0px 20px 0px 20px;
}

button.default:hover {
  background-color: #000;
  color: #fff;
}

button.default:disabled {
  border: 1px solid #c0c0c0;
  outline: 2px solid #c0c0c0;
  color: #c0c0c0;
}

button.default:disabled:hover {
  background-color: #fff;
}

/* Primary: Same size as default w/o double border */

button.default,
button.primary,
button.secondary,
button.image,
::file-selector-button {
  cursor: pointer;
  white-space: nowrap;
}

button.primary {
  border: 1px solid #000;
  border-radius: 4px;
  height: 24px;
  color: #000;
  background-color: #fff;
  font-family: "ChicagoFLF";
  font-size: 16px;
  padding: 0px 20px 0px 20px;
}

button.primary:hover {
  background-color: #000;
  color: #fff;
}
button.primary:hover img {
  filter: invert(100%);
}

button.primary:disabled {
  border: 1px solid #c0c0c0;
  color: #c0c0c0;
}
button.primary:disabled img {
  filter: invert(50%);
}

button.primary:disabled:hover {
  background-color: #fff;
}

/* Secondary: Thinner and smaller then primary button. */

button.secondary {
  border: 1px solid #000;
  border-radius: 4px;
  height: 14px;
  color: #000;
  background-color: #fff;
  font-family: "ChicagoFLF";
  font-size: 9px;
  padding: 0px 16px 0px 16px;
}

button.secondary:hover {
  background-color: #000;
  color: #fff;
}

button.secondary:disabled {
  border: 1px solid #c0c0c0;
  color: #c0c0c0;
}
::file-selector-button:disabled {
  border: 1px solid #c0c0c0;
  color: #c0c0c0;
}

button.secondary:disabled:hover {
  background-color: #fff;
  color: #c0c0c0;
}
::file-selector-button:disabled:hover {
  background-color: #fff;
  color: #c0c0c0;
}

button.secondary.add-left-margin {
  margin-left: 5px;
}

/** Image button **/
button.image {
  border: none;
  background-color: #fff;
}

/* NOTE: Even though the file select is the same type of button as secondary, I
 * had to style it separately as it was interfering with secondary disabled
 * states */
::file-selector-button {
  border: 1px solid #000;
  border-radius: 4px;
  height: 14px;
  color: #000;
  background-color: #fff;
  font-family: "ChicagoFLF";
  font-size: 9px;
  padding: 0px 16px 0px 16px;
}
::file-selector-button:hover {
  background-color: #000;
  color: #fff;
}

/**
 * Controls provide a way for buttons to be grouped in a logical way.
 *
 * They may be displayed on the bottom, or to the right.
 *
 * Forms must have the controls on the bottom. Lists must have the
 * controls on the right.
 */
.controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}


/**
 * Before, the controls on the right were sized using `vbox` and CSS size.
 *
 * This is a new pattern that allows controls to be part of a proportionally
 * sized container w/ a fixed width.
 *
 * Using the new proportionally sized model allows controls to share the same
 * size across all contexts. This also simplifies the visual language.
 */
.controls-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 10px;
  /* The default location for controls is the bottom. When controls are
   *`separated`, it indicates that there will be a top&bottom group of buttons.
   * Use the `separated` style in this context.
   */
  justify-content: flex-end;

  flex: 0 0 140px;
}
/* Allows controls to be grouped on top and bottom. This should override
 * the default flex-end justification. FIXME: test this */
.controls-right.separated {
  justify-content: space-between;
}
.controls-right.thin {
  flex: 0 0 100px;
}

/**
 * In rare contexts, the `controls-center` provides a way to
 * center the controls, rather than display them on the right.
 * Please use io.bithead.wordy as an example.
 */

.controls-center {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

/** Inputs **/

textarea,
input[type=text], input[type=password], input[type=email] {
  border: 1px solid #000;
  height: 24px;
  width: 100%;
  font-family: "Geneva";
  font-size: 12px;
}

/* Radio */

input[type=radio] {
  border: 1px solid #000;
  height: 12px;
  width: 12px;
  transform: translateY(2px);
  /* Not supported in older browsers. I'm not about to use the crazy hacks to make it work in all browsers. */
  accent-color: #000;
}

input[type=checkbox] {
  border: 1px solid #000;
  border-radius: 0px;
  height: 12px;
  width: 12px;
  transform: translate(1px, 1px);
  /* Not supported in older browsers. I'm not about to use the crazy hacks to make it work in all browsers. */
  accent-color: #000;
  /* FIXME: It's possible to change the checkbox shape. It requires hiding the checkbox and drawing a new one using `before`. */
}

/* Pop-up & UI Menu (select) */

/* The size of the `select` is expected to be 140px */
.align-vertically {
  display: flex;
  gap: 165px;
  justify-content: flex-start;
}

/* Contains all `ui-menu`s for a respective application. */
.ui-menus {
  position: relative;
  display: flex;
}

.ui-menu {
  position: relative;
  cursor: pointer;
}
.ui-popup-menu {
  display: flex;
  cursor: pointer;
}
.ui-menu {
  flex: 0 1 auto;
}

.ui-menu select,
.ui-popup-menu select {
  display: none; /* Hide original select element */
}

.ui-popup-menu label {
  margin-top: 6px;
  margin-right: 5px;
  font-size: 14px;
  /* This value may need to be configurable */
  width: 90px;
}

/**
 * The containers contain the label and the options for the select.
 *
 * In order for the content of the menu to display over other content, it must
 * be positioned absolutely inside another container that it is positioned
 * relative to.
 */
.ui-menu-container,
.ui-popup-container {
  font-family: "ChicagoFLF";
  font-size: 12px;
}
.ui-menu-container {
  position: relative;
}
.ui-popup-container {
  position: relative;
  border: 1px solid #000;
  box-shadow: 1px 1px 0px 0px #000;
}
.disabled .ui-popup-container {
  border: 1px solid #aaa;
}

/* The menu label. This is the first option in select. */
.ui-menu-label {
  width: fit-content;
  padding: 2px 10px 2px 10px;
}
.ui-popup-label { }

.ui-menu-label.ui-popup-arrow-active {
  background-color: #000;
  color: #fff;
}
.ui-menu .sub-container {
  position: absolute;
  left: 0px;
  top: 17px;
  border: 1px solid #000;
  box-shadow: 1px 1px 0px 0px #000;
}

/* Point arrow down by default */
.ui-popup-label:after {
  position: absolute;
  content: "";
  top: 10px;
  right: 10px;
  width: 0px;
  height: 0px;
  border: 5px solid transparent;
  border-color: #000 transparent transparent transparent;
}
.disabled .ui-popup-label:after {
  border-color: #ddd transparent transparent transparent;
}

.ui-popup-label.ui-popup-arrow-active:after {
  border-color: transparent transparent #000 transparent;
  top: 5px;
}
.disabled .ui-popup-label.ui-popup-arrow-active:after {
  border-color: transparent transparent #aaa transparent;
}

/* Contains the pop-up choices */
.ui-popup-choices { }

disabled .ui-popup-choice,
.ui-popup-choice.disabled,
.disabled .ui-popup-label {
  color: #ddd;
}
.ui-popup-choice, .ui-popup-label {
  background-color: #fff;
  color: #000;
  padding: 4px 8px;
  cursor: pointer;
}

/* Represents an individual choice in the menu */
.ui-popup-choice { }

.ui-popup-choice:hover {
  background-color: #000;
  color: #fff;
}

/* A line that separates groups of options */
.ui-popup-choice-divider {
  height: 1px;
  background-color: #aaa;
}

/* Show the popup menu above all other elements */
.ui-popup-active {
  z-index: 1000;
}
.ui-popup-active .sub-container {
  display: block;
  position: absolute;
  /* TODO: The `left` and `width` may need to change depending on width of container.
   * This only works for containers that are 160px wide. */
  left: -1px;
  width: calc(100%);
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  box-shadow: 1px 1px 0px 0px #000;
}

/* Hide select options when closed */
.ui-popup-inactive {
  z-index: 0;
}
.ui-popup-inactive .sub-container {
  display: none;
}

/**
 * Example using variables in CSS
 *
.rounded-corner {
  --radius: 2px;
}

select {
  border-radius: var(--radius);
}

<select class="rounded-corner">
  ...
</select>
*/

/* Folders */

ul.ui-folder { }

ul.ui-folder {
  --spacing: 2rem;
  --radius: 7px;
}

ul.ui-folder li {
  display: block;
  position: relative;
  padding-top: 2px;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 4px);
  padding-bottom: 2px;
  font-family: "ChicagoFLF";
  font-size: 12px;
  cursor: pointer;
}

ul.ui-folder ul {
  padding-left: 0px;
}

ul.ui-folder ul li:last-child {
  border-color: transparent;
}

ul.ui-folder ul li::before {
  content: '';
  display: block;
  position: absolute;
  /* This must be set to 10px or the first option in the list will not be tappable. */
  top: 10px;
  left: 0px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
}

ul.ui-folder summary {
  display: block;
  cursor: pointer;
}

ul.ui-folder summary::marker,
ul.ui-folder summary::-webkit-details-marker {
  display: none;
}

ul.ui-folder summary:focus {
  outline: none;
}

ul.ui-folder summary:focus-visible { }

ul.ui-folder li::after,
ul.ui-folder summary::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius));
  left: 20px;
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
}

ul.ui-folder summary::before {
  z-index: 1;
  top: 2px;
  background: transparent url('/boss/img/folder-closed.svg') 0px 0px no-repeat;
}

ul.ui-folder details[open] > summary::before {
  top: 6px;
  background: transparent url('/boss/img/folder-open.svg') 0px 0px no-repeat;
}

ul.ui-folder li.group::before {
  width: 20px;
  top: 5px;
  left: 12px;
  background: transparent url('/boss/img/folder.svg') 0px 0px no-repeat;
}

ul.ui-folder li.server::before {
  width: 20px;
  top: 11px;
  left: 12px;
  background: transparent url('/boss/img/server.svg') 0px 0px no-repeat;
}

ul.ui-folder li.file::before {
  width: 12px;
  top: 4px;
  left: 30px;
  background: transparent url('/boss/img/file-icon.svg') 0px 0px no-repeat;
}

ul.ui-folder li span {
  padding: 0px 1px 0px 2px;
}

ul.ui-folder li span.active {
  background-color: #000;
  color: #fff;
}

/* Folder metadata */
ul.ui-folder .metadata, ul.ui-folder .metadata-title {
  display: none;
}

/* Flexbox
 * https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * https://css-tricks.com/snippets/css/complete-guide-grid/
 */

/** Fieldset **/

fieldset {
  border: none;
  border: 1px solid #000;
  /* top and bottom are 10 as 10 is too much between first component. 10 is added on bottom as the controls
     already have 10px bottom padding. */
  padding: 10px 10px 10px 10px;

  font-family: "Geneva";
  font-size: 14px;
}

fieldset legend {
  font-family: "ChicagoFLF";
  font-size: 14px;
  color: #000;
  padding-left: 5px;
  padding-right: 5px;
}

/** Little controls (up and down arrow control) **/

div.little-controls {
  display: inline-block;
  border: 1px solid #000;
  width: 8px;
  height: 16px;
  padding: 0px;
  margin: 0px;
}
div.little-controls .up,
div.little-controls .down {
  cursor: pointer;
  height: 50%;
  width: 100%;
  border: none;
  padding: 0px;
  margin: 0px;
  background-color: #fff;
}
div.little-controls .up {
  display: block;
  background-image: url("/boss/img/filled-up-arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
}
div.little-controls .down {
  background-image: url("/boss/img/filled-down-arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
}
div.little-controls .up:hover,
div.little-controls .down:hover {
  filter: invert(100%);
}
div.little-controls .up:disabled,
div.little-controls .down:disabled {
  filter: invert(20%);
}
/**
 * This is required when the little-controls are in `div`s where it should _not_ affect the parent's height.
 * This vertically centers the control w/o affecting the size of the parent's height.
 */
div.little-controls.add-vertical-center {
  vertical-align: middle;
}

/** UIProgressBar **/

.ui-progress-bar {
  /** The OS is responsible for positioning, if any. **/
  display: block;
}
.ui-progress-bar .title {
  font-family: "ChicagoFLF";
  font-size: 12px;
  color: #000;
  padding-bottom: 4px;
}
.ui-progress-bar .ui-progress-container {
  border: 1px solid #000;
  /* Required for indeterminate animation */
  overflow: hidden;
}
.ui-progress-bar .ui-progress {
  /* If a value is in the progress bar, it needs to account for the left/right
   * padding around the value. */
  box-sizing: border-box;
  height: 10px;

  /* Text displayed in a progress bar will float at the end of the bar */
  font-family: "ChicagoFLF";
  font-size: 8px;
  color: #fff;
  background-color: #000;
  text-align: right;
  padding-left: 4px;
  padding-right: 4px;
}

.ui-modal .ui-progress-bar {
  margin-bottom: 10px;
}
.ui-modal .ui-progress-bar > .title {
  text-align: left;
  font-family: "ChicagoFLF";
  font-size: 12px;
  color: #000;
}
/* Displays progress bar and `Stop` button */
.ui-modal .ui-progress-bar > .ui-progress-controls {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.ui-modal .ui-progress-controls > .ui-progress-container {
  flex-grow: 1;
  height: 10px;
}
.ui-modal .ui-progress-controls > button.stop {
  width: 80px;
}

/* Indeterminate progress bar */

.ui-progress-bar.indeterminate .ui-progress {
  width: 100%;
  height: 10px;
  animation: indeterminate-animation 1s infinite linear;
  transform-origin: 0% 0%;
}

@keyframes indeterminate-animation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}

/** Bullet list of items **/

ul.bullet-list {
  padding-left: 0px;
  list-style-type: circle;
}

ul.bullet-list.add-more-margin {
  margin-bottom: 20px;
}

ul.bullet-list li {
  margin-left: 12px;
  font-family: "ChicagoFLF";
  font-size: 12px;
}

ul.bullet-list li:last-child {
}

ul.bullet-list li::before {
}

/** Common Utility **/

.add-margin {
  margin-bottom: 10px;
}

.center-control {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-window {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Used to center images in the middle of a container
 * The image must be contained within a `div.center-image` */
.center-image {
  text-align: center;
}
.center-image img {
  display: inline-block
  vertical-align: center;
}

.center-text {
  text-align: center;
}
.center-contents {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Allow element to scroll vertically. */
.scrollable {
  overflow-y: auto;
}

/* Place border around element */
.bordered {
  border: 1px solid #000;
}

/* Expands the element to stretch all the way to the right or bottom, if div is in a flex grid. */
.expanded {
  flex: 1 1 auto;
}

/** List of items **/

ul.flat-list li {
  display: inline-block;
}

ul.flat-list,
ul.simple-list {
  padding-left: 0px;
  list-style: none;
}

ul.flat-list {
  margin-bottom: 10px;
}
ul.flat-list,
ul.simple-list.add-more-margin {
  margin-bottom: 20px;
}

ul.flat-list,
ul.simple-list li {
  font-family: "ChicagoFLF";
  font-size: 12px;
}

ul.flat-list,
ul.simple-list li:last-child {
}

ul.flat-list,
ul.simple-list li::before {
  content: '';
}

/** Basic Text Styles **/

div.text {
  display: flex;
}
div.text p, div.text span {
  font-family: "Geneva";
  font-size: 14px;
}

div.text b, div.text strong {
  font-family: "ChicagoFLF";
  font-size: 14px;
}
div.text.large b {
  font-size: 18px;
}
div.text.align-center {
  justify-content: center;
  align-items: center;
}
div.text.align-left {
  justify-content: flex-start;
  align-items: flex-start;
}

/** Form Fields **/

/* A read-only label field */
div.read-only label {
  font-family: "ChicagoFLF";
  font-size: 14px;
  display: inline-block;
  /* Should match the .ui-popup-menu label width */
  width: 90px;
}
div.read-only label.wider {
  width: 120px;
}

/* The `span` inside `div.read-only` is the value for the field name */
div.read-only span {
  font-family: "Geneva";
  font-size: 14px;
}

/* Displays a statistic where the label is on the bottom, the stat on the top. */
div.statistic {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

div.statistic label {
  font-family: "ChicagoFLF";
  font-size: 14px;
  display: inline-block;
}

div.statistic span {
  font-family: "Geneva";
  font-size: 28px;
}

label {
  font-family: "ChicagoFLF";
  font-size: 14px;
}

.text-field label {
  display: block;
}
.textarea-field label {
  display: block;
}

.checkbox-field label { }
.radio-field { }

/** List Box **/

.ui-list-box select {
  display: none;
}
.ui-list-box {
  /**
   * The list box will conform to the size of its parent container.
   */
  flex: 1;
  border: 1px solid #000;
  font-family: "ChicagoFLF";
  font-size: 14px;
  padding: 2px;
  background-color: #fff;
  overflow-y: auto;
}
.ui-list-box > .container {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.ui-list-box > .container > .option {
  padding-left: 2px;
  color: #000;
  background-color: #fff;
  height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* When icons are displayed, there needs to be enough space on the left to support
 * them. */

.ui-list-box > .container > .option.selected {
  color: #fff;
  background-color: #000;
}
.ui-list-box > .container > .option.selected > img {
  filter: invert(100%);
}
.ui-list-box > .container > .option.disabled {
  color: #ddd;
}

.ui-list-box > .container > .option.child {
  padding-left: 20px;
}
/* Icons displayed to the left of the option's label. */
.ui-list-box > .container > .option > img {
  position: relative;
  top: 1px;
  left: 0px;
  width: 14px;
  height: 14px;
  padding-right: 2px;
}

/* Treat UIListBox options as buttons */
.ui-list-box.buttons { }
/**
 * When UIListBox options are treated as buttons, they have new behaviors, such
 * as displaying different background color when hovered over.
 */
.ui-list-box .button:hover {
  filter: invert(100%);
}
/**
 * Borderless list boxes are usually used in contexts where a UIListBox treats
 * its options as buttons.
 */
.ui-list-box.borderless {
  border: none;
}

/** Stack Views **/

/* Horizontal box: Left to right */

.hbox {
  display: flex;
  flex-direction: row;
  /* Constrains contents to be visible inside hbox. If element is larger
   * then hbox, it must specify that it can scroll. */
  overflow: hidden;
}
.hbox.align-top {
  align-items: flex-start;
}
.hbox.align-left {
  justify-content: flex-start;
}
.hbox.align-center {
  justify-content: center;
  align-items: center;
}
.hbox.align-right {
  justify-content: flex-end;
}
.hbox.align-bottom {
  align-items: flex-end;
}
.hbox.separated {
  justify-content: space-between;
}

/* Vertical box: Top to bottom */

.vbox {
  display: flex;
  flex-direction: column;
}
.vbox.align-left {
  justify-content: flex-start;
}
.vbox.align-center {
  justify-content: center;
  align-items: center;
}
.vbox.align-right {
  justify-content: flex-end;
}
.vbox.separated {
  justify-content: space-between;
}
.vbox.align-top {
  justify-content: flex-start;
}
.vbox.align-bottom {
  justify-content: flex-end;
}

.hbox.gap-5 {
  gap: 5px;
}
.hbox.gap-10 {
  gap: 10px;
}
.hbox.gap-20 {
  gap: 20px;
}
.vbox.gap-5 {
  gap: 5px;
}
.vbox.gap-10 {
  gap: 10px;
}
.vbox.gap-20 {
  gap: 20px;
}
/* Adds a one pixel separator between all elements */
.vbox.gap-separator > div {
  border-bottom: 1px solid #000;
}
.vbox.gap-separator > div:last-child {
  border-bottom: none;
}

/*
 * Allow proportional size of views.
 *
 * This is an experimental keyword that is intended to make it easy for views to
 * transition from a desktop to mobile context w/o rework on the view.
 *
 * This also avoids the pitfalls of `size` declarations exceeding the size of the
 * container (which I have experienced in several contexts). This allows the box
 * model to appropriately size elements, depending on the container size, w/ no
 * risk of child elements causing visual defects.
 */
.hbox.ratio-1 {
  flex: 1;
}
.hbox.ratio-2 {
  flex: 2;
}
.hbox.ratio-3 {
  flex: 3;
}
.vbox.ratio-1 {
  flex: 1;
}
/* TODO: Trying to figure out how to autosize the `select`. I'm not sure it's possible. */
.vbox.ratio-2 {
  flex: 2;
}
.vbox.ratio-3 {
  flex: 3;
}

/** Add padding where boxes aren't possible. */

.add-5-above {
  margin-top: 5px;
}
.add-10-above {
  margin-top: 10px;
}
.add-20-above {
  margin-top: 20px;
}

.add-5 {
  margin-bottom: 5px;
}
.add-10 {
  margin-bottom: 10px;
}
.add-20 {
  margin-bottom: 20px;
}

/** Inline info and error messages **/

div.error-message,
div.info-message {
  font-family: "Geneva";
  font-size: 12px;
  color: #000;
}
div.info-message:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('/boss/img/info.svg');
  background-size: cover;
  margin-right: 10px;
  vertical-align: middle;
}
div.error-message:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('/boss/img/stop.svg');
  background-size: cover;
  margin-right: 10px;
  vertical-align: middle;
}

/**
 * UITabs
 *
 * Display a horizontally aligned list of select options. Used for file tabs, open windows, etc.
 **/

div.ui-tabs { }
div.ui-tabs ::-webkit-scrollbar {
  display: none;
}
div.ui-tabs > select {
  display: none;
}

/* Contains facade options */
div.ui-tabs > .container {
  display: flex;
  flex-direction: row;

  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 30px;

  background-color: #fff;
}
div.ui-tabs .ui-tab {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding-left: 20px;
  padding-right: 20px;
  color: #c0c0c0;
  font-family: "ChicagoFLF";
  font-size: 14px;
  cursor: pointer;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
div.ui-tabs .ui-tab.selected {
  color: #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
/* Display a close button on UITab */
div.ui-tabs .ui-tab > .close-button {
  position: relative;
  left: -14px;
  width: 18px;
  height: 18px;
  background-image: url("/boss/img/close-button.svg");
  background-position: center;
  background-repeat: no-repeat;
}
div.ui-tabs .ui-tab:hover {
  color: #000;
}

iframe.godot {
  width: 100%;
  height: 100%;
}

pre.console {
  padding: 10px;
  background-color: #000;
  color: #fff;
  font-family: monospace;
  border: 1px solid #fff;
  outline: 1px solid #000;
  outline-offset: 1px;
  margin: 2px;
}

/** UIPopOver **/

/* TODO: Add pointer */
div.ui-pop-over {
  position: absolute;
  top: 0px;
  left: 0px;
}
div.ui-pop-over > .message {
  padding: 6px;
  border: 1px solid #000;
  border-radius: 5px;
  background-color: #fff;

  font-family: "Geneva";
  font-size: 12px;
  color: #000;
}
div.ui-pop-over > .bottom-arrow {
  position: relative;
  width: 16px;
  height: 11px;
  background: transparent url('/boss/img/ui-pop-over-down-arrow.svg') 0px 0px no-repeat;
}
div.ui-pop-over > .top-arrow {
  position: relative;
  width: 16px;
  height: 11px;
  background: transparent url('/boss/img/ui-pop-over-up-arrow.svg') 0px 0px no-repeat;
}

.show-cursor {
  cursor: pointer;
}
.show-edit-cursor {
  cursor: url('/boss/img/pencil.png') 8 16, auto;
}

/**
 * UIToolbox
 *
 * The UIToolbox allows you to display 1-N tools horizontally. The Photoshop floating
 * pallette is a perfect example of a UIToolbox. Where several tools are grouped close
 * to one another w/ a one pixel boundary. Each of the tools is a "button" that can
 * activate a function.
 *
 * To change the size of the buttons/imgs, refer to `.ui-toolbox .default`. Create your own
 * size that fits your use case. Also refer to `.one`, `.two`, and `.three` styles to see how
 * you can manage how the buttons flow within the grid.
 */

div.ui-toolbox {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: 1px;
  margin: 0;
  width: fit-content;
  height: fit-content;
}

/* Give the impression that elements are separated. */
div.ui-toolbox.bordered {
  padding: 1px;
  background-color: #000;
}

/**
 * Limit the size of the parent to 1, 2, or 3 items in toolbox before it starts wrapping
 * to the next tools.
 *
 * NOTE: This may only work if `.bordered` is applied as it adds one additional
 * pixel for gap between elements.
 */
div.ui-toolbox.one {
  max-width: 44px;
  min-width: 44px; /* Prevents wrapping */
}
div.ui-toolbox.two {
  max-width: 89px;
  min-width: 89px;
}
div.ui-toolbox.three {
  max-width: 134px;
  min-width: 134px;
}

/* All buttons within a toolbox are styled the same way. */
div.ui-toolbox button {
  all: unset;
  color: #000;
  background-color: #fff;
  font-family: "ChicagoFLF";
  font-size: 16px;
  padding: 5px;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Apply default height and width of buttons within UIToolbox. */
div.ui-toolbox.default button {
  width: 34px;
  height: 34px;
}
div.ui-toolbox button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
div.ui-toolbox button:hover {
  filter: invert(100%);
}