@use "components/tooltips" as *;
@use "components/banners" as *;
@use "utils" as *;

// Variables
$spacing-sm: 2px;
$spacing-md: 8px;
$spacing-lg: 2em;
$icon-size-sm: 14px;
$icon-size-md: 32px;
$admin-tool-border: 2px dashed rgb(255, 140, 0);
$link-color: blue;
$link-color-highlighted: white;

html {
  color-scheme: light dark;
  zoom: 160%;
}

input {
  color: black;
}

body:not(.framed) {
  margin: $spacing-lg;
}

a.open-link {
  color: $link-color !important;

  .highlighted > td > & {
    color: $link-color-highlighted !important;
  }
}

.dialog-icon {
  width: $icon-size-md;
  display: inline;
  float: left;
  margin-right: $spacing-md;
}

img {
  image-rendering: pixelated;
}

.title-icon {
  width: $icon-size-sm;
  height: $icon-size-sm;
  position: absolute;
  margin-right: $spacing-md;
}

.title-bar {
  &.iconed > .title-bar-text {
    margin-left: 24px;
  }
}

.admin-tool {
  border: $admin-tool-border;
  border-radius: 0;
  padding: $spacing-sm;

  &.span {
    border-radius: 0;
    padding: 3px $spacing-sm;
  }
}

.window {
  position: absolute;
}

@media (max-width: 768px) {
  .window {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin-bottom: $spacing-lg;
    margin-right: 5px;
  }
  html:not(.hframed) {
    zoom: 100%;
  }
}

.framed {
  font-family: "Pixelated MS Sans Serif", Arial;
  zoom: 62.5%;
}

iframe {
  border: none;
}