// These are set explicitly so the body
// color loads correctly before the mantine body
// variable is overridden with JS.
body[data-mantine-color-scheme="light"] {
  background-color: #f8f9fa;
}
body[data-mantine-color-scheme="dark"] {
  background-color: #0f1115;
}

* {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:visited {
  color: inherit;
}
a:focus {
  text-decoration: none;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  text-wrap: nowrap;
}

.hover-underline:hover {
  text-decoration: underline;
}

.bordered-light {
  border: 1px solid color-mix(in srgb, var(--mantine-color-accent-border-1) 50%, transparent);
  transition: border 150ms ease;
}
.bordered-light:hover {
  border: 1px solid color-mix(in srgb, var(--mantine-color-accent-border-4) 50%, transparent);
}

.bordered-heavy {
  border: 1px solid color-mix(in srgb, var(--mantine-color-accent-border-5) 50%, transparent);
  transition: border 150ms ease;
}
.bordered-heavy:hover {
  border: 1px solid color-mix(in srgb, var(--mantine-color-accent-border-9) 50%, transparent);
}

.bordered-heavy-outline {
  &[data-variant="outline"] {
    border: 1px solid color-mix(in srgb, var(--mantine-color-accent-border-5) 50%, transparent);
    transition: border 150ms ease;
  }
}
.bordered-heavy-outline:hover {
  &[data-variant="outline"] {
    border: 1px solid color-mix(in srgb, var(--mantine-color-accent-border-9) 50%, transparent);
  }
}

.accent-hover-light {
  background-color: var(--mantine-color-accent-2);
}
.accent-hover-light:hover {
  background-color: var(--mantine-color-accent-5);
}

.accent-hover-heavy {
  background-color: var(--mantine-color-accent-7);
}
.accent-hover-heavy:hover {
  background-color: var(--mantine-color-accent-9);
}

.select-nondimmed-placeholder .mantine-Input-input::placeholder {
  color: inherit;
  opacity: 1;
}

.monaco-editor {
  position: absolute !important;
}

.xterm .xterm-viewport::-webkit-scrollbar {
  width: 5px;
  border-radius: var(--mantine-radius-sm);
}
