/* Little X Little developer docs — extra styling */

:root {
  --md-primary-fg-color:           #5E35B1;
  --md-primary-fg-color--light:    #7E57C2;
  --md-primary-fg-color--dark:     #4527A0;
  --md-accent-fg-color:            #F59E0B;
}

.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 1rem;
  transition: border-color 200ms, box-shadow 200ms;
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: var(--md-primary-fg-color--light);
  box-shadow: 0 4px 14px -6px rgba(94, 53, 177, 0.25);
}

.md-typeset code {
  font-feature-settings: "ss01", "ss02";
}

.md-typeset table:not([class]) th {
  background: var(--md-primary-fg-color);
  color: #fff;
  font-weight: 600;
}

.md-header {
  background: linear-gradient(135deg, #4527A0 0%, #5E35B1 50%, #7E57C2 100%);
}

.md-tabs {
  background: var(--md-primary-fg-color--dark);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--md-accent-fg-color);
}