/* -------------------------------------------------------------------------- */
/* --- Main Dome Styles                                                   --- */
/* -------------------------------------------------------------------------- */

* {
  user-select: none;
  box-sizing: border-box;
  margin: 0 ;
  padding: 0 ;
}

body {
  color: var(--text);
  background: var(--background-softer);
  overflow: hidden ;
  position: fixed ;
  font-family: sans-serif ;
  font-size: 13px ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
}

#app {
  width: 100% ;
  height: 100% ;
}

/* -------------------------------------------------------------------------- */
/* --- Frame Colors                                                       --- */
/* -------------------------------------------------------------------------- */

.dome-phantom {
    display: none;
}

.dome-hidden {
    visibility: hidden;
}

.dome-color-frame {
    fill:         var(--text-discrete) ;
    color:        var(--text-discrete) ;
    border-color: var(--border) ;
    background:   var(--background-intense) ;
}

.dome-color-dragzone {
    opacity: 0.0 ;
    background: transparent ;
    transition: opacity .1s linear 0.1s , background .1s linear 0.1s ;
}

.dome-color-dragzone:hover {
    background: var(--grid-layout-holder) ;
    opacity: 0.4 ;
    transition: opacity .1s linear 0.1s , background .1s linear 0.1s ;
}

.dome-color-dragging {
    background: var(--grid-layout-target) ;
    opacity: 0.5 ;
    transition: opacity .1s linear 0.1s , background .1s linear 0.1s ;
}

div.dome-dragged {
    background: var(--grid-layout-holder) ;
    border: none ;
}

.dome-dragging * {
    cursor: move ;
}

/* -------------------------------------------------------------------------- */
/* --- Text Properties                                                    --- */
/* -------------------------------------------------------------------------- */

.dome-text-label {
    font-family: sans-serif ;
    user-select: none ;
    white-space: nowrap ;
    text-overflow: ellipsis ;
}

.dome-text-title {
    font-family: sans-serif ;
    font-size: larger ;
    font-weight: bolder ;
    user-select: none ;
    white-space: nowrap ;
    text-overflow: ellipsis ;
}

.dome-text-descr {
    font-family: sans-serif ;
    font-size: smaller ;
    user-select: none ;
    white-space: wrap ;
    text-overflow: ellipsis ;
}

.dome-text-data {
    cursor: text ;
    user-select: text ;
    font-family: sans-serif ;
    white-space: nowrap ;
    text-overflow: clip ;
}

.dome-text-code {
    cursor: text ;
    user-select: text ;
    font-family: 'Andale mono', monospace ;
    font-size: 9pt ;
    white-space: nowrap ;
    text-overflow: clip ;
}

.dome-text-cell {
    cursor: default ;
    user-select: text ;
    font-family: 'Andale mono', monospace ;
    font-size: 9pt ;
    white-space: nowrap ;
    text-overflow: clip ;
}

/* -------------------------------------------------------------------------- */
/* --- Theme-compliant Scrollbars                                         --- */
/* -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--background-intense);
}

::-webkit-scrollbar-thumb {
  background-color: var(--info-text-discrete);
  border-radius: 20px;
  border: 3px solid var(--background-intense);
}

::-webkit-scrollbar-corner {
  background-color: var(--background-profound);
  background: var(--background-profound);
  color: var(--background-profound);
}

/* -------------------------------------------------------------------------- */
/* --- Theme-compliant Input Widgets                                      --- */
/* -------------------------------------------------------------------------- */

input[type="search"]::placeholder {
  font-style: italic;
  color: var(--text-discrete);
}

input[type="text"]::placeholder {
  font-style: italic;
  color: var(--text-discrete);
}

input[type="text"] {
  vertical-align: middle;
  margin: 2px 4px 2px 0px;
  background-color: var(--background-interaction);
  border: var(--border);
  border-radius: 2px;
}

input:focus-visible {
  outline: none;
  box-shadow: 0px 0px 1px 1px var(--border);
}

input[type="checkbox"] {
  appearance: none;
  width: 13px;
  height: 13px;
  border: 1px solid var(--border);
  border-radius: 2px;
  content: "";
  font-size: 12px;
  color: var(--text);
  background-clip: content-box;
  padding: 1px;
}

input[type="checkbox"]:checked {
  background-color: var(--checked-element);
}

/* -------------------------------------------------------------------------- */
