/* Source module: button.css */
.btn-shell {
  display: inline-flex;
  padding: 4px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.dnf-btn {
  appearance: none;
  position: relative;
  height: 30px;
  min-width: 110px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--gold);
  border: 1px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, #1f355e 0%, #1d2f53 55%, #1a2849 100%) padding-box,
    linear-gradient(180deg, #684f2d 0%, #483423 100%) border-box;
  box-shadow: none;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

button.dnf-btn {
  font-family: inherit;
  cursor: pointer;
}
button.dnf-btn.normal:not(.raster-tone):not(.image):hover,
button.dnf-btn.normal:not(.raster-tone):not(.image):focus-visible {
  color: #eee2aa;
  background:
    linear-gradient(180deg, #29457f 0%, #273f74 55%, #24386a 100%) padding-box,
    linear-gradient(180deg, #725f4e 0%, #524444 100%) border-box;
  outline: none;
}
button.dnf-btn.normal:not(.raster-tone):not(.image):active {
  color: #eee2aa;
  transform: translateY(1px);
  background:
    linear-gradient(180deg, #29457f 0%, #273f74 55%, #24386a 100%) padding-box,
    linear-gradient(180deg, #725f4e 0%, #524444 100%) border-box;
}
button.dnf-btn:disabled {
  cursor: default;
}

.dnf-btn.normal {
  background:
    linear-gradient(180deg, #1f355e 0%, #1d2f53 55%, #1a2849 100%) padding-box,
    linear-gradient(180deg, #684f2d 0%, #483423 100%) border-box;
}
.dnf-btn.hover {
  color: #eee2aa;
  background:
    linear-gradient(180deg, #29457f 0%, #273f74 55%, #24386a 100%) padding-box,
    linear-gradient(180deg, #725f4e 0%, #524444 100%) border-box;
}
.dnf-btn.pressed {
  transform: translateY(1px);
  background:
    linear-gradient(180deg, #29457f 0%, #263e73 58%, #213462 100%) padding-box,
    linear-gradient(180deg, #725f4e 0%, #524444 100%) border-box;
}
.dnf-btn.disabled {
  color: #666566;
  background:
    linear-gradient(180deg, #2c2c2c 0%, #272727 55%, #222 100%) padding-box,
    linear-gradient(180deg, #343434 0%, #262626 100%) border-box;
}
.dnf-btn.large {
  height: 44px;
  min-width: 168px;
  font-size: 16px;
}

/* CSS replica of the compact NinePatch family. State colors are derived from the base tone. */
.dnf-btn.image,
.dnf-btn.raster-tone {
  --button-top: var(--control-blue-top);
  --button-bottom: var(--control-blue-bottom);
  --button-edge-top: var(--control-edge-top);
  --button-edge-bottom: var(--control-edge-bottom);
  --button-state-top: var(--button-top);
  --button-state-bottom: var(--button-bottom);
  --button-state-edge-top: var(--button-edge-top);
  --button-state-edge-bottom: var(--button-edge-bottom);
  --button-hover-r: 10;
  --button-hover-g: 16;
  --button-hover-b: 33;
  height: 26px;
  min-width: 112px;
  padding: 0 10px;
  isolation:isolate;
  border:1px solid rgba(0,0,0,.6);
  border-radius: 0;
  background:transparent;
  box-shadow:none;
}
.dnf-btn.image::before,
.dnf-btn.raster-tone::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  margin:1px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg,var(--button-state-top),var(--button-state-bottom)) padding-box,
    linear-gradient(180deg,var(--button-state-edge-top),var(--button-state-edge-bottom)) border-box;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  pointer-events:none;
}
.dnf-btn.image.hover,
.dnf-btn.raster-tone.normal:hover,
.dnf-btn.raster-tone.hover {
  --button-state-top:rgb(from var(--button-top) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
  --button-state-bottom:rgb(from var(--button-bottom) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
  --button-state-edge-top:rgb(from var(--button-edge-top) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
  --button-state-edge-bottom:rgb(from var(--button-edge-bottom) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
}
.dnf-btn.image.pressed,
.dnf-btn.raster-tone.normal:active,
.dnf-btn.raster-tone.pressed {
  --button-state-top:rgb(from var(--button-top) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
  --button-state-bottom:rgb(from var(--button-bottom) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
  --button-state-edge-top:rgb(from var(--button-edge-top) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
  --button-state-edge-bottom:rgb(from var(--button-edge-bottom) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
  transform:translateY(1px);
}
.dnf-btn.image.disabled,
.dnf-btn.raster-tone.disabled {
  --button-state-top:var(--control-disabled-top);
  --button-state-bottom:var(--control-disabled-bottom);
  --button-state-edge-top:var(--control-disabled-edge-top);
  --button-state-edge-bottom:var(--control-disabled-edge-bottom);
  color:#666566;
}
.dnf-btn.raster-tone.tone-green {
  --button-top:var(--control-green-top);
  --button-bottom:var(--control-green-bottom);
  --button-hover-r:10;
  --button-hover-g:33;
  --button-hover-b:14;
}
.dnf-btn.raster-tone.tone-orange {
  --button-top:var(--control-orange-top);
  --button-bottom:var(--control-orange-bottom);
  --button-hover-r:33;
  --button-hover-g:22;
  --button-hover-b:10;
}

.button-showcase-panel .panel-body { padding:10px 18px; }
.button-state-grid { gap:4px 14px; }
.button-state-grid .sample-cell { height:44px;padding:4px 12px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px; }
.button-state-grid .sample-label { margin:0; }
.button-state-grid .button-implementation-label { min-height:44px;padding:5px 10px; }
.button-showcase-panel .spec-row[style] { margin-top:8px!important; }

.button-implementation-label {
  min-height: 52px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 2px solid var(--brass);
  background: #080908;
  color: var(--gold);
  font-size: 13px;
}
.button-implementation-label small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.dnf-btn:has(> .btn-icon),
.dnf-btn:has(> .button-glyph) { padding-inline:30px; }
.dnf-btn > .btn-icon,
.dnf-btn > .button-glyph { position:absolute;left:10px;top:50%;transform:translateY(-50%); }
.btn-icon { font: 18px/1 Georgia, serif; color: #e4c98f; }

.icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #7a6238;
  background: linear-gradient(#2e4779, #1b2b4f);
  box-shadow: inset 0 0 0 1px #12203d, 0 0 0 3px #111317;
  color: #ddc47e;
}

.icon-btn img, .pixel { image-rendering: pixelated; }