@import "tailwindcss";

@theme {
  --font-sans: "Vazirmatn", "Tahoma", ui-sans-serif, system-ui, sans-serif;
}

html {
  font-family: "Vazirmatn", "Tahoma", ui-sans-serif, system-ui, sans-serif;
}

body {
  background-color: var(--color-slate-200);
  -webkit-tap-highlight-color: transparent;
}

/* اسلایدر پیشرفت کمی بلندتر برای لمس راحت */
input[type="range"] {
  height: 1.75rem;
}

/* ---- اسلایدر زوم گانت (عمودی) ------------------------------------------
   قاعدهٔ بالا height همهٔ اسلایدرها را ۱.۷۵rem می‌کند و اسلایدر عمودی را به یک
   نوار خیلی کوتاه تبدیل می‌کند؛ پس ارتفاع و ریل اینجا صریح تعیین می‌شود.

   نکتهٔ وسط‌چینی دستگیره: در اسلایدر عمودی، محور «عرض» برای دستگیره همان
   محور بلوکی است. پس برای این‌که دایره روی ریل وسط بنشیند باید هم عرض ریل و
   هم ضخامت دستگیره صریح تعیین شوند و دستگیره با margin در محور بلوکی
   وسط‌چین شود. اگر این‌ها را به مرورگر بسپاریم، دستگیره یک‌طرف ریل می‌افتد. */
input[type="range"].zoom-range {
  --zoom-track: 0.5rem;   /* عرض ریل */
  --zoom-thumb: 1.375rem; /* قطر دایره */
  --zoom-shift: calc((var(--zoom-thumb) - var(--zoom-track)) / 2);

  height: 8rem;
  width: var(--zoom-thumb); /* جا برای دایره؛ ریل باریک‌تر است */
  writing-mode: vertical-lr;
  direction: rtl;
  accent-color: var(--color-sky-600);
  background: transparent;
  /* خود عنصر نباید روی محور بلوکی padding داشته باشد تا جمع عرض‌ها دقیق بماند */
  padding: 0;
  border: 0;
}

/* ریل: دقیقاً وسط عرض عنصر */
input[type="range"].zoom-range::-webkit-slider-runnable-track {
  width: var(--zoom-track);
  margin-inline: auto;
  border-radius: 9999px;
  background: var(--color-slate-200);
}

/* دستگیره: وسط‌چین روی ریل. مرورگر دستگیره را نسبت به لبهٔ ریل می‌چسباند،
   پس به اندازهٔ نصف اختلاف، به سمت داخل کشیده می‌شود. */
input[type="range"].zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--zoom-thumb);
  height: var(--zoom-thumb);
  margin-block-start: calc(var(--zoom-shift) * 1);
  margin-inline-start: calc(var(--zoom-shift) * 1);
  border-radius: 9999px;
  background: var(--color-sky-600);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgb(15 23 42 / 0.35);
  cursor: grab;
}

input[type="range"].zoom-range::-webkit-slider-thumb:active {
  cursor: grabbing;
}

input[type="range"].zoom-range::-moz-range-track {
  width: var(--zoom-track);
  border-radius: 9999px;
  background: var(--color-slate-200);
}

input[type="range"].zoom-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--zoom-thumb);
  height: var(--zoom-thumb);
  margin-inline-start: calc(var(--zoom-shift) * -1);
  border-radius: 9999px;
  background: var(--color-sky-600);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgb(15 23 42 / 0.35);
  cursor: grab;
}