
/* Color variables used by hoverOutline */
.yellow {
  --background-color: rgba(var(--gd-yellow), 0.12);
  --hover-border-color: rgba(var(--gd-yellow), 0.6);
  --hover-shadow-1: rgba(var(--gd-yellow), 0.35);
  --hover-shadow-2: rgba(var(--gd-yellow), 0.22);
}

.cyan {
  --background-color: rgba(var(--gd-cyan), 0.03);
  --hover-border-color: rgba(var(--gd-cyan), 0.6);
  --hover-shadow-1: rgba(var(--gd-cyan), 0.35);
  --hover-shadow-2: rgba(var(--gd-cyan), 0.22);
}

.red {
  --background-color: rgba(var(--gd-red), 0.03);
  --hover-border-color: rgba(var(--gd-red), 0.6);
  --hover-shadow-1: rgba(var(--gd-red), 0.35);
  --hover-shadow-2: rgba(var(--gd-red), 0.22);
}

.blue {
  --background-color: rgba(var(--gd-blue), 0.03);
  --hover-border-color: rgba(var(--gd-blue), 0.6);
  --hover-shadow-1: rgba(var(--gd-blue), 0.35);
  --hover-shadow-2: rgba(var(--gd-blue), 0.22);
}

.green {
  --background-color: rgba(var(--gd-green), 0.03);
  --hover-border-color: rgba(var(--gd-green), 0.6);
  --hover-shadow-1: rgba(var(--gd-green), 0.35);
  --hover-shadow-2: rgba(var(--gd-green), 0.22);
}

.orange {
  --background-color: rgba(var(--gd-orange), 0.03);
  --hover-border-color: rgba(var(--gd-orange), 0.64);
  --hover-shadow-1: rgba(var(--gd-orange), 0.4);
  --hover-shadow-2: rgba(var(--gd-orange), 0.25);
}

.purple {
  --background-color: rgba(var(--gd-purple), 0.03);
  --hover-border-color: rgba(var(--gd-purple), 0.6);
  --hover-shadow-1: rgba(var(--gd-purple), 0.35);
  --hover-shadow-2: rgba(var(--gd-purple), 0.22);
}

.gray,
.grey {
  --background-color: rgba(var(--gd-gray), 0.03);
  --hover-border-color: rgba(var(--gd-gray), 0.55);
  --hover-shadow-1: rgba(var(--gd-gray), 0.3);
  --hover-shadow-2: rgba(var(--gd-gray), 0.18);
}


.chip {
  position: relative;
  border-radius: var(--mantine-radius-md);
  background: var(--background-color);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.chipGlowHover {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.chipGlowHover:hover {
  border-color: var(--hover-border-color);
  box-shadow: 0 0 0 1px var(--hover-shadow-1), 0 2px 10px var(--hover-shadow-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(59, 130, 246, 0.12);
}

.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.monoValue {
  font-family: var(--mantine-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
