@import url('./controls.css');
@import url('./inputs.css');
@import url('./fonts.css');
/* Original client textures, scoped so other pages can opt in. */
.tibia-ui {
  --ui-text: #dfdfdf;
  --ui-muted: #b9b9b9;
  --ui-accent: #efcf8a;
  --sprite-font-family: 'Tibia Verdana 13', 'Tibia UI', sans-serif;
  --sprite-font-size: 13px;
  --ui-stone: url('./assets/background.png');
  --ui-dark-stone: url('./assets/background_dark.png');
  --ui-frame: url('./assets/2pixel-up-frame-borderimage.png');
  font-family: 'Tibia Pixel', 'Tibia UI', Verdana, Geneva, sans-serif;
  font-size: 11px;
  font-synthesis: none;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--ui-text);
  color-scheme: dark;
  background: #303030 var(--ui-dark-stone) repeat;
}
.tibia-ui :is(button, input, select) { font: inherit; color: inherit; border-radius: 0; }
.tibia-ui :is(button, a, input, select) { outline-offset: 3px; }
.tibia-ui :is(button, a):focus-visible,
.tibia-ui .file-label:focus-within { outline: 2px solid var(--ui-accent); }
.tibia-ui :is(input, select):focus { outline: none; }
.tibia-ui input:focus-visible,
.tibia-ui select:not(.tibia-select-native):focus-visible { box-shadow: inset 0 -1px #ad9b72; }
.tibia-ui :is(button:not([data-ui-plain]), .file-label, .ui-button-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 3px solid #555;
  border-image: url('./assets/button-normal.png') 3 fill / 3px stretch;
  background: #454545;
  text-shadow: 1px 1px #161616;
  text-align: center;
  white-space: normal;
  text-decoration: none;
  cursor: pointer;
}
.tibia-ui :is(button:not([data-ui-plain]), .file-label, .ui-button-link):hover:not(:disabled, [aria-pressed='true'], [aria-selected='true'], [aria-current='page']) {
  border-image-source: url('./assets/button-hover.png');
  color: #fff;
}
.tibia-ui :is(button:not([data-ui-plain]), .file-label, .ui-button-link):active:not(:disabled),
.tibia-ui button:is([aria-pressed='true'], [aria-selected='true'], [aria-current='page']) {
  border-image-source: url('./assets/button-pressed.png');
  color: var(--ui-accent);
}
.tibia-ui button:is([aria-pressed='true'], [aria-selected='true'], [aria-current='page']) { box-shadow: inset 0 -2px #ae9257; }
.tibia-ui :is(button, input, select):disabled { opacity: .5; cursor: default; }
.tibia-ui .file-label:has(input:disabled) { opacity: .5; cursor: default; }
.tibia-ui input:not([type='checkbox'], [type='file'], [type='range'], [type='color'], [type='radio']),
.tibia-ui select {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #171717;
  border-image: url('./assets/textedit.png') 1 fill / 1px stretch;
  background: #363636;
}
.tibia-ui input::placeholder { color: #acacac; }
.tibia-ui select { border-image-slice: 1; }
.tibia-ui option { background: #363636; color: var(--ui-text); }
.tibia-ui input[type='checkbox'] {
  appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  border: 0;
  background: url('./assets/checkbox-off.png') center / 16px 16px no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}
.tibia-ui input[type='checkbox']:checked { background-image: url('./assets/checkbox-on.png'); }
.tibia-ui input:is([type='range'], [type='radio'], [type='color']) { accent-color: var(--ui-accent); }
.tibia-ui a { color: var(--ui-accent); }
.tibia-ui ::selection { background: #71613b; color: #fff; }
.tibia-ui * { scrollbar-color: #777 #303030; scrollbar-width: thin; }
@media (forced-colors: active) {
  .tibia-ui :is(input, select):focus-visible { outline: 1px solid Highlight; outline-offset: -2px; }
  .tibia-ui :is(button, input, select, .file-label, .ui-button-link) { border-image: none; border: 1px solid ButtonText; }
  .tibia-ui input[type='checkbox'] { appearance: auto; }
  .tibia-ui button:is([aria-pressed='true'], [aria-selected='true'], [aria-current='page']) { outline: 2px solid Highlight; }
}