/* Container */

.footnotes {
}

.footnotes ::marker {
  content: '';
}

/* Summary toggle */

.footnotes summary {
  border-bottom: 1px solid #271D23;
  border-bottom: 1px solid var(--color-black);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.footnotes summary::after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("data: image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTUgOC41NzE0M0g4LjU3MTQzVjE1SDYuNDI4NTdWOC41NzE0M0gwVjYuNDI4NTdINi40Mjg1N1YwSDguNTcxNDNWNi40Mjg1N0gxNVY4LjU3MTQzWiIgZmlsbD0iIzI3MUQyMyIvPgo8L3N2Zz4=");
  }

/* List & items */

.footnotes__list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: max(0.83rem, min(calc(0.79rem + 0.23vw), 1.00rem));
  font-size: var(--step--1);
}

.footnotes__item-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.footnotes__item-backlink {
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
  color: #271D23;
  color: var(--color-black);
}

/* Citation */

.footnote__citation {
  color: #201C40;
  color: var(--color-text);
  font-weight: 500;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: 0.8em;
  background-color: #E9E7E3;
  background-color: var(--color-lighter-grey);
  padding: 0 0.3em;
  display: inline-block;
  border-radius: 25%;
}