/*
--------------------
ISSUE 7
--------------------
*/

#pe07 .gallery__item svg {
    padding: 0;
}
@media screen and (prefers-color-scheme: dark) {
    .article__fig--interactive svg,
    .gallery__item svg {
        filter: brightness(var(--l-dark-text));
    }
    .article__fig svg *[stroke="#ccc"] {
        stroke: var(--hsl-bg);
    }
}
.article__fig svg {
    font-family: var(--fonts-text);
    font-feature-settings: "lnum" 1;
}
.article__fig svg *[fill="#ededed"] {
    fill: var(--hsl-tint);
}
.article__fig svg *[fill="#fff"] {
    fill: var(--hsl-bg);
}
.article__fig svg *[stroke="#fff"] {
    stroke: var(--hsl-bg);
}
.article__fig svg *[fill="#000"],
.article__fig svg circle,
.article__fig svg text {
    fill: var(--hsl-text);
}
.article__fig svg *[stroke="#000"] {
    stroke: var(--hsl-text);
}
.article__fig--interactive {
    --checkbox-toggle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="white" /></svg>');
    background-color: var(--hsl-tint);
    display: flex;
    flex-direction: column;
    font-family: var(--fonts-text);
    gap: calc(var(--line) / 2);
    padding: var(--padding);
}
@media screen and (min-width: 65em) {
    .article__fig--interactive {
        padding: var(--line);
    }
}
@media (prefers-color-scheme: dark) {
    .article__fig--interactive {
        --checkbox-toggle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="hsl(0,0%,23%)" /></svg>');
    }
}
.article__fig--interactive form,
.article__fig--interactive form div {
    display: flex;
    align-items: center;
    gap: 2ch;
    justify-content: space-between;
    line-height: 1;
}
.article__fig--interactive form div {
    gap: 0.5ch;
}
.article__fig--interactive input[type="checkbox"] {
    appearance: none;
    background:
        var(--checkbox-toggle)
        0 0 / contain
        no-repeat
        var(--hsl-text);
    border: 2px solid var(--hsl-text);
    border-radius: 1em;
    height: 2em;
    transition: background 0.2s, border 0.2s;
    width: 3.5em;
}
.article__fig--interactive input[type="checkbox"]:checked {
    background-position-x: right;
}
.article__fig--interactive #regenerate {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--hsl-text);
  border: none;
  border-radius: 1em;
  color: var(--hsl-bg);
  line-height: 1;
  padding: 0.5em 1em;
}
.article__fig--interactive #regenerate:active {
    transform: translate(2px, 2px);
}
#generator {
    scroll-margin-top: calc((var(--padding) * 2) + var(--line) + (var(--scale0) * var(--line-height)));
}
@media screen and (min-width: 65em) {
    #generator {
        scroll-margin-top: calc(var(--padding) + var(--line) + (var(--scale0) * var(--line-height)));
    }
}
@media print {
    #generator {
        display: none;
    }
}