/* ------------------------------------------------ vapordon stage, 4 controls

   text boxes, dropdowns, checkboxes, buttons, tabs, badges, the segmented bars and the stepping spinner
*/

/* ------------------------------------------------ text boxes */

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="image"])),
textarea, select, .modal-input {
  background-color: var(--v-window) !important;
  color: var(--v-text) !important;
  border: 1px solid !important;
  border-color: var(--v-inset) !important;
  outline: none !important;
  caret-color: var(--v-text);
  font-size: 12px !important;
}
input:focus, textarea:focus, select:focus { outline: 1px solid #000 !important; outline-offset: 0 !important; }
input::placeholder, textarea::placeholder { color: var(--v-off) !important; opacity: 1; }
input:disabled, textarea:disabled, select:disabled { color: var(--v-off) !important; background-color: var(--v-control) !important; }

/* the dropdown gets the little raised MenuButton glued on the right */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 24px !important;
  background-image:
    var(--v-arrow),
    linear-gradient(var(--v-control), var(--v-control)),
    linear-gradient(var(--v-shade), var(--v-shade)),
    linear-gradient(var(--v-lit), var(--v-lit)) !important;
  background-repeat: no-repeat !important;
  background-size: 7px 4px, 15px calc(100% - 4px), 16px calc(100% - 2px), 16px calc(100% - 2px) !important;
  background-position: right 6px center, right 2px top 2px, right 1px top 1px, right 2px top 1px !important;
}
select option { background: var(--v-window); color: var(--v-text); }

/* checkboxes, inset well with a gold tick */
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 13px !important; height: 13px !important; min-width: 13px; margin: 0 4px 0 0;
  background: var(--v-window) !important;
  border: 1px solid !important; border-color: var(--v-inset) !important;
  vertical-align: -2px; cursor: pointer; padding: 0 !important;
}
input[type="checkbox"]:checked { background: var(--v-window) var(--v-check) center / 9px 9px no-repeat !important; }
input[type="checkbox"]:indeterminate { background: var(--v-window) linear-gradient(var(--v-gold), var(--v-gold)) center / 7px 2px no-repeat !important; }
input[type="checkbox"]:disabled { opacity: .5; }

/* radios are the one round thing that survived 2005 */
input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 13px !important; height: 13px !important; margin: 0 4px 0 0;
  border-radius: 50% !important;
  background: var(--v-window) !important;
  border: 1px solid !important; border-color: var(--v-inset) !important;
  vertical-align: -2px; cursor: pointer;
}
input[type="radio"]:checked { background: radial-gradient(var(--v-gold) 0 2.5px, var(--v-window) 3px) !important; }

/* sliders, a sunken groove and a raised block to drag */
input[type="range"] { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; height: 18px; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: #1f1f1f; border: 1px solid; border-color: var(--v-inset);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 9px; height: 16px; margin-top: -7px;
  background: var(--v-control); border: 1px solid; border-color: var(--v-raised); cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 4px; background: #1f1f1f; border: 1px solid; border-color: var(--v-inset); }
input[type="range"]::-moz-range-thumb { width: 9px; height: 16px; background: var(--v-control); border: 1px solid; border-color: var(--v-raised); }

input[type="color"] {
  appearance: none; -webkit-appearance: none; padding: 2px !important;
  background: var(--v-window) !important; border: 1px solid !important; border-color: var(--v-inset) !important;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid var(--v-shade); }

input[type="file"] { color: var(--v-dim) !important; font-size: 12px !important; }
input[type="file"]::file-selector-button {
  background: var(--v-control); color: var(--v-text); border: 1px solid; border-color: var(--v-raised);
  padding: 3px 10px; margin-right: 8px; font: 12px var(--v-font); cursor: pointer;
}

/* ------------------------------------------------ buttons, raised until you press them */

button:where(:not(.leaflet-control *):not([class*="color-dot"]):not(.tray-sticker)),     /* :where keeps it light, or the tab states lose */
.btn, input[type="button"], input[type="submit"], input[type="reset"], a.button, a.btn,
.icon-btn, .nav-btn, .chip, .seg > *, .range-tab, .tab, [role="tab"], .room-tab, .view-toggle > *,
.leaflet-bar a, .leaflet-control-zoom a {
  background: var(--v-control) !important;
  color: var(--v-text) !important;
  border: 1px solid !important;
  border-color: var(--v-raised) !important;
  font-family: var(--v-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transform: none !important;
  cursor: default;
}
button:hover, .btn:hover, input[type="submit"]:hover, a.button:hover, a.btn:hover, .icon-btn:hover,
.chip:hover, .range-tab:hover, .tab:hover, .room-tab:hover, .leaflet-bar a:hover {
  background: var(--v-control) !important;
  color: var(--v-bright) !important;
}
button:active:not(:disabled), .btn:active, input[type="submit"]:active, a.button:active, a.btn:active, .icon-btn:active,
.leaflet-bar a:active {
  border-color: var(--v-inset) !important;
}
/* the default button gets the black ring, steam put it on whatever ENTER would press */
button.primary, .btn.primary, .btn-primary, button[type="submit"], input[type="submit"], .upload-submit-btn {
  outline: 1px solid #000 !important;
  outline-offset: 0 !important;
}
.btn.danger, button.danger, .btn-danger, .danger.btn, button.del, .btn.del { color: #e8a58f !important; }
.btn.danger:hover, button.danger:hover, .btn-danger:hover { color: #ffc2ae !important; }
button:disabled, .btn:disabled, button[disabled], .btn.disabled, input[type="submit"]:disabled {
  color: var(--v-off) !important;
  text-shadow: 1px 1px 0 var(--v-shade) !important;
  outline: none !important;
}
button:focus-visible, .btn:focus-visible { outline: 1px dotted var(--v-text) !important; outline-offset: -4px !important; }

/* tabs and segments. the picked one sinks in and goes gold like an armed menu item */
.active, .on, .selected, [aria-selected="true"], [aria-pressed="true"] { color: var(--v-gold) !important; }
.chip.active, .chip.on, .seg > .active, .seg > .on, .range-tab.active, .tab.active, [role="tab"][aria-selected="true"],
.room-tab.active, .nav-btn.active, .view-toggle > .active {
  background: var(--v-window) !important;
  border-color: var(--v-inset) !important;
  color: var(--v-gold) !important;
}

/* ------------------------------------------------ badges, tags, pills */

.badge, .tag, .pill, .card-badge, .state-badge, .live-badge, .play-badge, .unread-badge, .user-pill, .status-pill,
.trip-live-tag, .afk-tag, .tdn-tag, .ftag, .wind-chip {
  background: var(--v-window) !important;
  border: 1px solid var(--v-shade) !important;
  color: var(--v-dim) !important;
  font-weight: 400 !important;
}
.badge-admin, .badge-new, .badge-pin, .unread-badge, .live-badge { color: var(--v-gold) !important; }
.badge-public { color: var(--v-text) !important; }

/* ------------------------------------------------ progress, the chunky segmented steam download bar */

progress { appearance: none; -webkit-appearance: none; height: 14px; border: 1px solid; border-color: var(--v-inset); background: var(--v-window); }
progress::-webkit-progress-bar { background: var(--v-window); }
progress::-webkit-progress-value, progress::-moz-progress-bar,
.progress-fill, .storage-fill, .bar > .fill, .bar > span, .meter > span, .meter > .fill, .mbar > span, .bbar > span,
.size-bar > span, #bar > *, .bar > i, .upload-progress .progress-fill {
  background: repeating-linear-gradient(90deg, var(--v-gold) 0 6px, transparent 6px 8px) !important;
}
.progress-bar, .storage-bar, .bar, .meter, .mbar, .bbar, .size-bar, #bar {
  background: var(--v-window) !important;
  border: 1px solid !important;
  border-color: var(--v-inset) !important;
  padding: 1px !important;
  box-sizing: content-box;
}
.storage-fill-warn { background: repeating-linear-gradient(90deg, var(--v-amber) 0 6px, transparent 6px 8px) !important; }
.storage-fill-danger { background: repeating-linear-gradient(90deg, var(--v-red) 0 6px, transparent 6px 8px) !important; }

/* spinners turned into spinning squares once the corners went, so they get the stepping steam strip instead */
.spinner, .loader, [class*="spinner"] {
  width: 34px !important; height: 10px !important; padding: 0 !important;
  border: 1px solid !important; border-color: var(--v-inset) !important;
  background: var(--v-window) repeating-linear-gradient(90deg, var(--v-gold) 0 6px, transparent 6px 8px) no-repeat !important;
  background-size: 8px 100% !important;
  animation: v-throb 1.2s steps(4) infinite !important;
  transform: none !important;
}
@keyframes v-throb { from { background-position: 1px 0; } to { background-position: 33px 0; } }