/* Extend :root, [data-theme=light]  */
:root, [data-theme=light] {
  @extend :root, [data-theme=light];

  --c-snapshot-bg: #c17a67;
  --c-snapshot-text: #ffffff;
  --c-snapshot-text-muted: #163b57;
  --c-snapshot-bg-alt-1: #d6ab66;
  --c-snapshot-text-alt-1: #ffffff;
  --c-snapshot-text-muted-alt-1: #163b57;
  --c-snapshot-bg-alt-2: #8ba18e;
  --c-snapshot-text-alt-2: #ffffff;
  --c-snapshot-text-muted-alt-2: #163b57;
  --c-snapshot-bg-alt-3: #b3c9cd;
  --c-snapshot-text-alt-3: #ffffff;
  --c-snapshot-text-muted-alt-3: #163b57;
  --c-snapshot-bg-alt-4: #d6ab66;
  --c-snapshot-text-alt-4: #ffffff;
  --c-snapshot-text-muted-alt-4: #163b57;
  --c-snapshot-bg-alt-5: #e0d4bd;
  --c-snapshot-text-alt-5: #ffffff;
  --c-snapshot-text-muted-alt-5: #163b57;
  --c-snapshot-bg-alt-6: #123456;
  --c-snapshot-text-alt-6: #ffffff;
  --c-snapshot-text-muted-alt-6: #d6ab66;
}

/* Extend [data-theme=dark] */
[data-theme=dark] {
  @extend [data-theme=dark];

  --c-snapshot-bg: #c17a67;
  --c-snapshot-text: #ffffff;
  --c-snapshot-text-muted: #163b57;
  --c-snapshot-bg-alt-1: #d6ab66;
  --c-snapshot-text-alt-1: #ffffff;
  --c-snapshot-text-muted-alt-1: #163b57;
  --c-snapshot-bg-alt-2: #8ba18e;
  --c-snapshot-text-alt-2: #ffffff;
  --c-snapshot-text-muted-alt-2: #163b57;
  --c-snapshot-bg-alt-3: #b3c9cd;
  --c-snapshot-text-alt-3: #ffffff;
  --c-snapshot-text-muted-alt-3: #163b57;
  --c-snapshot-bg-alt-4: #d6ab66;
  --c-snapshot-text-alt-4: #ffffff;
  --c-snapshot-text-muted-alt-4: #163b57;
  --c-snapshot-bg-alt-5: #e0d4bd;
  --c-snapshot-text-alt-5: #ffffff;
  --c-snapshot-text-muted-alt-5: #163b57;
  --c-snapshot-bg-alt-6: #123456;
  --c-snapshot-text-alt-6: #ffffff;
  --c-snapshot-text-muted-alt-6: #d6ab66;
}

/* Extend [data-theme=tone] */
[data-theme=tone] {
  @extend [data-theme=tone];

  --c-snapshot-bg: #c17a67;
  --c-snapshot-text: #ffffff;
  --c-snapshot-text-muted: #163b57;
  --c-snapshot-bg-alt-1: #d6ab66;
  --c-snapshot-text-alt-1: #ffffff;
  --c-snapshot-text-muted-alt-1: #163b57;
  --c-snapshot-bg-alt-2: #8ba18e;
  --c-snapshot-text-alt-2: #ffffff;
  --c-snapshot-text-muted-alt-2: #163b57;
  --c-snapshot-bg-alt-3: #b3c9cd;
  --c-snapshot-text-alt-3: #ffffff;
  --c-snapshot-text-muted-alt-3: #163b57;
  --c-snapshot-bg-alt-4: #d6ab66;
  --c-snapshot-text-alt-4: #ffffff;
  --c-snapshot-text-muted-alt-4: #163b57;
  --c-snapshot-bg-alt-5: #e0d4bd;
  --c-snapshot-text-alt-5: #ffffff;
  --c-snapshot-text-muted-alt-5: #163b57;
  --c-snapshot-bg-alt-6: #123456;
  --c-snapshot-text-alt-6: #ffffff;
  --c-snapshot-text-muted-alt-6: #d6ab66;
}

.factoids__list.snapshot {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.factoids__list.snapshot .factoids__group {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 150px;
}

.factoids__list.snapshot .factoids__item {
  flex: 0 0 50%;
  background-color: var(--c-snapshot-bg);
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
  padding: 2.5%;
  align-items: center;
}

.factoids__list.snapshot .factoids__item .factoids__item-description {
  color: var(--c-snapshot-text-muted);
  font-size: 28px;
  /* text-transform: capitalize !important; */
}
.factoids__list.snapshot .factoids__item .factoids__item-figure {
  color: var(--c-snapshot-text)
}

.factoids__list.snapshot .factoids__item-2 {
  background-color: var(--c-snapshot-bg-alt-1);
}

.factoids__list.snapshot .factoids__item-3 {
  background-color: var(--c-snapshot-bg-alt-2);
}

.factoids__list.snapshot .factoids__item-4 {
  background-color: var(--c-snapshot-bg-alt-3);
}

.factoids__list.snapshot .factoids__item-5 {
  background-color: var(--c-snapshot-bg-alt-4);
}

.factoids__list.snapshot .factoids__item-6 {
  background-color: var(--c-snapshot-bg-alt-5);
}

.factoids__list.snapshot .factoids__item-7 {
  background-color: var(--c-snapshot-bg-alt-6);
}
.factoids__list.snapshot .factoids__item-7 .factoids__item-description {
  color: var(--c-snapshot-text-muted-alt-6)
}
.factoids__list.snapshot .factoids__item-7 .factoids__item-figure {
  color: var(--c-snapshot-text-alt-6)
}
.factoids__list.snapshot .factoids__item--full {
  flex: 0 0 100%;
}