:root {
  --taif-window-radius-sm: 3px;
  --taif-window-radius-md: 4px;
  --taif-window-header-blue: #0f4f96;
  --taif-window-border: rgba(15, 23, 42, .18);
  --taif-window-shadow: 0 18px 42px rgba(15, 23, 42, .18);
  --taif-window-backdrop: rgba(15, 23, 42, .14);
}

.taif-window-layer {
  position: fixed;
  inset: 0;
  z-index: 2400;
  pointer-events: none;
}

.taif-window-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: auto;
}

.taif-window {
  position: fixed;
  direction: rtl;
  background: #fff;
  border: 1px solid var(--taif-window-border);
  border-radius: var(--taif-window-radius-md);
  box-shadow: var(--taif-window-shadow);
  overflow: hidden;
}

.taif-window--sm { width: min(420px, calc(100vw - 24px)); }
.taif-window--md { width: min(720px, calc(100vw - 24px)); }
.taif-window--lg { width: min(1040px, calc(100vw - 24px)); }
.taif-window--workspace {
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
}

.taif-window__head {
  background: var(--taif-window-header-blue);
  color: #fff;
}

.taif-window__actions,
[data-taif-window-actions="true"] {
  direction: ltr;
}

[data-taif-window="true"],
[data-taif-window-layer="true"],
[data-taif-window-backdrop="true"] {
  --taif-window-contract: active;
}