/*
 * style.css
 */

.styles-preview {
    font-family: "Adwaita Mono";
    font-size: 20px;
    opacity:0.8;
    color: var(--window-fg-color);
}
.ascii-preview {
    background: transparent;
    background-size: 12px 24px;
    background-image:
        linear-gradient(to right, #cccccc 1px, transparent 1px),
        linear-gradient(to bottom, #cccccc 1px, transparent 1px);
    box-shadow:
        inset 0px 0px 0px 1px #878787,
        0px 0px 6px 6px var(--headerbar-shade-color);
    opacity:0.4;
}
.ascii {
    font-family: "Adwaita Mono";
    font-size: 20px;
    color: var(--window-fg-color);
}
.mono-entry {
    font-family: "Adwaita Mono";
    font-size: 20px;
    background: var(--window-bg-color);
}
.font-preview {
    font-family: "Adwaita Mono";
    font-size: 8px;
    color: var(--window-fg-color);
}
.switcher button {
    margin-left:3px;
    margin-right:3px;
    transition: background-color 200ms linear;
    background-color: transparent;
}

.switcher button:hover {
  background-color: alpha(var(--window-fg-color), 0.05);
}

.switcher button:checked {
  background-color: alpha(var(--window-fg-color), 0.08);
}

.switcher button:checked:hover {
  background-color: alpha(var(--window-fg-color), 0.1);
}

.selection {
    border: 2px dashed mix(var(--accent-color), white, 0.4);
}

@media (prefers-color-scheme: dark) {
  .ascii-preview {
      background: transparent;
      background-size: 12px 24px;
      background-image:
          linear-gradient(to right, #363636 1px, transparent 1px),
          linear-gradient(to bottom, #363636 1px, transparent 1px);
      box-shadow:
          inset 0px 0px 0px 1px #555555,
          0px 0px 6px 6px var(--headerbar-shade-color);
      opacity:0.4;
  }
}

flowbox flowboxchild:hover {
  background-color: transparent;
}
