/* Style overrides */
:root {
  --primary: #666AF6 !important;
  --primary-hover: #474dfa !important;
  --font-size: 1rem !important;

  --card-background-color: #f5f5f5 !important;
  --warning-color: #b07000;

  --color-red: #d93526;
  --color-pink: #f42c6f;
  --color-fuchsia: #d9269d;
  --color-purple: #9236a4;
  --color-violet: #9236a4;
  --color-indigo: #524ed2;
  --color-blue: #3c71f7;
  --color-azure: #029ae8;
  --color-cyan: #058686;
  --color-jade: #00895a;
  --color-green: #398712;
  --color-lime: #a5d601;
  --color-yellow: #f2df0d;
  --color-amber: #ffbf00;
  --color-pumpkin: #ff9500;
  --color-orange: #e74b1a;
  --color-brown: #6d4c40;

  /* mathlive keyboard */
  --keyboard-zindex: 3000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --warning-color: var(--mark-background-color);
    --card-background-color: #141e26 !important;
  }
}

.error,
.failure {
  /* The variable --del-color is defined by pico */
  color: var(--del-color);
}

.success {
  /* The variable --ins-color is defined by pico */
  color: var(--ins-color);
}

.warning {
  color: var(--warning-color);
}

.green {
  color: var(--color-green);
}

button.danger,
a[role="button"].danger {
  background-color: var(--del-color);
  border: 1px solid var(--del-color);
}

button.danger:hover,
a[role="button"].danger:hover {
  background-color: var(--form-element-invalid-border-color);
  border: 1px solid var(--form-element-invalid-border-color);
}

button.success,
a[role="button"].success {
  background-color: var(--ins-color);
  border: 1px solid var(--ins-color);
  color: var(--color);
}

button.success:hover,
a[role="button"].success:hover {
  background-color: var(--form-element-valid-border-color);
  border: 1px solid var(--form-element-valid-border-color);
}

article.warning {
  border: 1px solid #ffc067;
}

@media (prefers-color-scheme: dark) {
  article.warning {
    border: 1px solid var(--mark-background-color);
  }
}

article.danger {
  border: 1px solid var(--del-color);
}

.p-last-child-no-margin>p:last-child {
  margin-bottom: 0;
}

.hide-after::after {
  display: none !important;
  height: 0 !important;
  content: none !important;
}

/* Custom styles for icons */
.fill-gold {
  fill: gold;
  transition: fill 0.3s ease-in-out;
}

.fill-gold:hover {
  fill: darkgoldenrod;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background: #2a2a2a;
  }

  ::-webkit-scrollbar-thumb {
    background: #434343;
    border-radius: 15px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #636363;
  }
}

/* Print only style */
@media print {
  ::-webkit-scrollbar {
    height: 0;
    width: 0;
    display: none;
  }
}

/* Style overrides for toast */
._toastBar {
  display: none !important;
}

._toastContainer li {
  list-style-type: none !important;
}

._toastMsg {
  text-align: center;
}

/* Animations */
*[data-animated] {
  opacity: 0;
}

*[data-animated][data-visible="true"] {
  animation: appear 0.5s ease-in-out forwards;
  animation-delay: 0.25s;
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Summary arrow fix */
details summary:has(div)::after {
  transform: translateY(-1rem) rotate(-90deg) !important;
}

details[open]>summary:has(div)::after {
  transform: translateY(-1rem) rotate(0) !important;
}

/* Hover make primary */
.primary-on-hover {
  transition: color 0.3s ease-in-out;
  color: var(--h1-color);
}

.primary-on-hover:hover {
  color: var(--primary-hover);
}

/* Other */
.margin-left {
  margin-left: 0.5rem;
}

.clickable {
  cursor: pointer;
}