/* Habbo-style chrome windows. 9-slice frame + dotted titlebar + inset well.
   Skins live on .mz-window[data-skin] or .mz-sandbox[data-skin] (inherited). */

.mz-window,
.mz-sandbox {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-slate.png");
  --mz-dot-tile: 4px;
  --mz-dot-opacity: 0.32;
  --mz-dots-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
  --mz-title-dot: #9aabbc;
  --mz-chrome-border: #060910;
  --mz-chrome-fill: #1a1f26;
  --mz-chrome-highlight: #5a6b7c;
  --mz-frame-bg: #121820;
  --mz-featured: #0c1016;
  --mz-parchment: #e8eef4;
  --mz-parchment-dim: #8b9aab;
  --mz-cream: #e8eef4;
  --mz-amber: #3d8bfd;
  --mz-title-ink: #e8eef4;
  --mz-title-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
}

.mz-window[data-skin="paper"],
.mz-sandbox[data-skin="paper"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-paper.png");
  --mz-title-dot: #7a7060;
  --mz-chrome-border: #1e242c;
  --mz-chrome-fill: #e4dfd4;
  --mz-chrome-highlight: #f7f3ea;
  --mz-frame-bg: #f1ece3;
  --mz-featured: #d8d0c2;
  --mz-parchment: #1e242c;
  --mz-parchment-dim: #5e6975;
  --mz-cream: #1e242c;
  --mz-amber: #2f6fdb;
  --mz-title-ink: #1e242c;
  --mz-title-shadow: none;
}

.mz-window[data-skin="accent"],
.mz-sandbox[data-skin="accent"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-accent.png");
  --mz-title-dot: #8ec0ff;
  --mz-chrome-border: #0a1628;
  --mz-chrome-fill: #1a3358;
  --mz-chrome-highlight: #6aa6ff;
  --mz-frame-bg: #152a45;
  --mz-featured: #0f1f35;
  --mz-parchment: #d6e6ff;
  --mz-parchment-dim: #8b9aab;
  --mz-cream: #e8eef4;
  --mz-amber: #3d8bfd;
}

.mz-window[data-skin="success"],
.mz-sandbox[data-skin="success"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-success.png");
  --mz-title-dot: #5ee9b0;
  --mz-chrome-border: #041810;
  --mz-chrome-fill: #0d3b2c;
  --mz-chrome-highlight: #34d399;
  --mz-frame-bg: #0f3228;
  --mz-featured: #0a241c;
  --mz-parchment: #d4f5e8;
  --mz-parchment-dim: #8b9aab;
  --mz-cream: #e8eef4;
  --mz-amber: #34d399;
}

.mz-window[data-skin="warn"],
.mz-sandbox[data-skin="warn"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-warn.png");
  --mz-title-dot: #f6c45a;
  --mz-chrome-border: #2a1a04;
  --mz-chrome-fill: #8a5a08;
  --mz-chrome-highlight: #f6c45a;
  --mz-frame-bg: #6e4808;
  --mz-featured: #5c3c06;
  --mz-parchment: #fff4d4;
  --mz-parchment-dim: #e8d5a0;
  --mz-cream: #fff8e8;
  --mz-amber: #f6c45a;
}

.mz-window[data-skin="danger"],
.mz-sandbox[data-skin="danger"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-danger.png");
  --mz-title-dot: #fca5a5;
  --mz-chrome-border: #2a0808;
  --mz-chrome-fill: #8b1e1e;
  --mz-chrome-highlight: #f87171;
  --mz-frame-bg: #6b1818;
  --mz-featured: #5c1414;
  --mz-parchment: #ffe4e4;
  --mz-parchment-dim: #e8b4b4;
  --mz-cream: #fff5f5;
  --mz-amber: #f87171;
}

.mz-window[data-skin="purple"],
.mz-sandbox[data-skin="purple"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-purple.png");
  --mz-title-dot: #d8b4fe;
  --mz-chrome-border: #1a0a30;
  --mz-chrome-fill: #4c1d95;
  --mz-chrome-highlight: #c084fc;
  --mz-frame-bg: #3b1676;
  --mz-featured: #2e1065;
  --mz-parchment: #f3e8ff;
  --mz-parchment-dim: #c4b5e0;
  --mz-cream: #faf5ff;
  --mz-amber: #c084fc;
}

.mz-window[data-skin="teal"],
.mz-sandbox[data-skin="teal"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-teal.png");
  --mz-title-dot: #5eead4;
  --mz-chrome-border: #04201c;
  --mz-chrome-fill: #0f4f48;
  --mz-chrome-highlight: #2dd4bf;
  --mz-frame-bg: #0c403a;
  --mz-featured: #0a3632;
  --mz-parchment: #ccfbf1;
  --mz-parchment-dim: #8bb8b0;
  --mz-cream: #f0fdfa;
  --mz-amber: #2dd4bf;
}

.mz-window[data-skin="cyan"],
.mz-sandbox[data-skin="cyan"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-cyan.png");
  --mz-title-dot: #67e8f9;
  --mz-chrome-border: #042028;
  --mz-chrome-fill: #0e5c6e;
  --mz-chrome-highlight: #22d3ee;
  --mz-frame-bg: #0c4a58;
  --mz-featured: #0a414d;
  --mz-parchment: #cffafe;
  --mz-parchment-dim: #8bb8c0;
  --mz-cream: #ecfeff;
  --mz-amber: #22d3ee;
}

.mz-window[data-skin="orange"],
.mz-sandbox[data-skin="orange"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-orange.png");
  --mz-title-dot: #fdba74;
  --mz-chrome-border: #2a1004;
  --mz-chrome-fill: #9a3412;
  --mz-chrome-highlight: #fb923c;
  --mz-frame-bg: #7c2d12;
  --mz-featured: #6b240c;
  --mz-parchment: #ffedd5;
  --mz-parchment-dim: #e8c4a0;
  --mz-cream: #fff7ed;
  --mz-amber: #fb923c;
}

html[data-theme="light"] .mz-window[data-skin="slate"],
html[data-theme="paper"] .mz-window[data-skin="slate"] {
  --mz-frame-src: url("/assets/admin/mz-chrome/window_frame-paper.png");
  --mz-title-dot: #7a7060;
  --mz-chrome-border: #1e242c;
  --mz-chrome-fill: #e4dfd4;
  --mz-chrome-highlight: #f7f3ea;
  --mz-frame-bg: #f1ece3;
  --mz-featured: #d8d0c2;
  --mz-parchment: #1e242c;
  --mz-parchment-dim: #5e6975;
  --mz-cream: #1e242c;
  --mz-amber: #2f6fdb;
  --mz-title-ink: #1e242c;
  --mz-title-shadow: none;
}

.mz-window {
  width: min(538px, 100%);
  margin: 0;
  border-style: solid;
  border-width: 14px;
  border-image-source: var(--mz-frame-src);
  border-image-slice: 14 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

.mz-window--wide {
  width: 100%;
}

.mz-titlebar,
.mz-frame-btn {
  isolation: isolate;
}

.mz-titlebar::before,
.mz-frame-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 0;
  height: calc(round(down, 100% - 4px, var(--mz-dot-tile)));
  transform: translateY(-50%);
  pointer-events: none;
  opacity: var(--mz-dot-opacity);
  background-color: var(--mz-title-dot);
  -webkit-mask-image: var(--mz-dots-mask);
  mask-image: var(--mz-dots-mask);
  -webkit-mask-size: var(--mz-dot-tile) var(--mz-dot-tile);
  mask-size: var(--mz-dot-tile) var(--mz-dot-tile);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}

.mz-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 40px;
  overflow: hidden;
  background-color: var(--mz-chrome-fill);
}

.mz-titlebar-text {
  margin: -9px 0;
  padding: 9px 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  background: var(--mz-chrome-fill);
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--mz-title-ink);
  text-shadow: var(--mz-title-shadow);
  letter-spacing: 0.04em;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

.mz-close {
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--mz-chrome-border);
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, #dcd3c0);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  color: #3a2a15;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.mz-close:hover {
  background: #fff;
}

.mz-frame {
  margin: 10px;
  background: var(--mz-frame-bg);
  border: 1px solid var(--mz-chrome-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--mz-chrome-highlight),
    inset 1px 0 0 var(--mz-chrome-highlight),
    0 -3px 0 rgba(0, 0, 0, 0.45);
}

.mz-body {
  padding: 16px 18px;
  color: var(--mz-parchment);
  font-size: 0.85rem;
  line-height: 1.45;
}

.mz-body p {
  margin: 0 0 0.75rem;
}

.mz-body p:last-child {
  margin-bottom: 0;
}

.mz-body .muted {
  color: var(--mz-parchment-dim);
}

.mz-frame-btn {
  position: relative;
  display: inline-block;
  padding: 10px 28px;
  border-style: solid;
  border-width: 7px;
  border-image-source: var(--mz-frame-src);
  border-image-slice: 14;
  border-image-width: 7px;
  border-image-repeat: stretch;
  border-radius: 7px;
  background-color: var(--mz-chrome-fill);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  color: var(--mz-title-ink);
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: var(--mz-title-shadow);
  cursor: pointer;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

.mz-frame-btn:hover {
  transform: translateY(-2px);
  color: var(--mz-title-ink);
  text-decoration: none;
}

.mz-featured {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin: 10px;
  background: var(--mz-featured);
  border: 1px solid var(--mz-chrome-border);
  border-radius: 8px;
}

.mz-featured-head {
  padding: 0.55rem 0.75rem;
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mz-amber);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

.mz-featured .mz-frame {
  flex: 1;
  margin: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}

.mz-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mz-list li {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  color: var(--mz-parchment);
  font-size: 0.82rem;
}

.mz-list li:last-child {
  border-bottom: 0;
}

.mz-list li strong {
  display: block;
  color: var(--mz-cream);
  font-weight: 400;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}