/* Depth and the pressed face are painted in separate artwork PNGs.
   Nine-slice rendering preserves pixel corners on both small icons and wide cards. */
button[data-ui-skin] {
  position:relative;
  isolation:isolate;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  border-radius:0;
  transition:none !important;
  --ui-face:var(--ui-normal);
  --ui-slice:var(--ui-normal-slice);
  --ui-border:8px;
}
button[data-ui-skin="answer"] { --ui-normal:var(--ui-answer-normal); --ui-down:var(--ui-answer-pressed); --ui-normal-slice:var(--ui-answer-normal-slice); --ui-down-slice:var(--ui-answer-pressed-slice); --ui-border:12px; }
button[data-ui-skin="primary"] { --ui-normal:var(--ui-primary-normal); --ui-down:var(--ui-primary-pressed); --ui-normal-slice:var(--ui-primary-normal-slice); --ui-down-slice:var(--ui-primary-pressed-slice); --ui-border:12px; }
button[data-ui-skin="neutral"] { --ui-normal:var(--ui-neutral-normal); --ui-down:var(--ui-neutral-pressed); --ui-normal-slice:var(--ui-neutral-normal-slice); --ui-down-slice:var(--ui-neutral-pressed-slice); }
button[data-ui-skin="selected"] { color:#fff0ce; --ui-normal:var(--ui-selected-normal); --ui-down:var(--ui-selected-pressed); --ui-normal-slice:var(--ui-selected-normal-slice); --ui-down-slice:var(--ui-selected-pressed-slice); }
button[data-ui-skin][data-ui-pressed="true"] { --ui-face:var(--ui-down); --ui-slice:var(--ui-down-slice); }
button[data-ui-skin]::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  width:auto;
  height:auto;
  margin:0;
  pointer-events:none;
  box-sizing:border-box;
  background:none;
  border:var(--ui-border) solid transparent;
  border-image:var(--ui-face) var(--ui-slice) fill / var(--ui-border) / 0 stretch;
  border-radius:0;
  image-rendering:pixelated;
}
button[data-ui-skin]:hover,button[data-ui-skin]:active {
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}
button[data-ui-skin]:disabled,button[data-ui-skin][aria-disabled="true"] { opacity:.45; }
.quiet-button[data-ui-skin] { padding-inline:9px; }