/* Small custom styles. Included sections (files.php, chat.php, ...) share this file. */
html { --accent: #0d6efd; }
html[data-accent="green"]  { --accent: #198754; }
html[data-accent="orange"] { --accent: #e8590c; }
html[data-accent="purple"] { --accent: #6f42c1; }

h1 { border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: .15rem; }
a { color: var(--accent); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(.9); color: #fff; }
.card:hover { border-color: var(--accent); }
.card-title a { color: inherit; }
.icon { font-size: 1.8rem; line-height: 1; }
.disabled-card { opacity: .6; }
.edit { text-decoration: none; font-size: 1rem; }
.swatch { width: 1.5rem; height: 1.5rem; border-radius: 50%; padding: 0; border: 2px solid var(--bs-border-color); }
.swatch[data-pick="blue"]   { background: #0d6efd; }
.swatch[data-pick="green"]  { background: #198754; }
.swatch[data-pick="orange"] { background: #e8590c; }
.swatch[data-pick="purple"] { background: #6f42c1; }
.feature {
  border: 1px solid var(--bs-border-color);
  border-top: 3px solid var(--accent);
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: var(--bs-tertiary-bg);
}