/* ==========================================================================
   block-selection-bar.css
   Bottom bar yang muncul saat user melakukan long-press + select teks di
   editor (bukan cuma kursor collapsed) — isinya 3 aksi (Select Block, Copy
   Block, Paste Block, RATA KIRI) + satu tombol batal ikon "X" (RATA KANAN
   SENDIRI, lewat justify-content: space-between di root bar, bukan margin
   manual). DOM & wiring-nya ada di src/js/editor/block-selection-bar.js,
   file ini KHUSUS styling — pola yang sama dengan outline.css/image-sheet.css.

   Kenapa PAKAI translateY, BUKAN fade opacity: permintaan produk secara
   eksplisit minta animasi muncul/tutup yang smooth tapi TANPA fade opacity
   (opacity dianggap terasa kurang "native" utk elemen yang nempel ke tepi
   layar). Jadi baris ini SENGAJA selalu tetap dirender di DOM & tetap
   opaque (tidak pernah animasi opacity), hanya posisinya (translateY) yang
   bergerak masuk/keluar — sama seperti .image-sheet & .outline-sidebar. */

.block-selection-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  /* Padding vertikal (5px) SENGAJA disamakan persis dengan
     .note-topbar-row (layout.css) — tombolnya juga sama-sama 36px persegi
     (lihat .block-selection-bar__btn/__cancel di bawah, senada
     .toolbar-btn) — supaya tinggi total bar ini (5+36+5=46px, belum
     termasuk safe-area) identik dengan tinggi topbar, bukan cuma warnanya
     yang senada. */
  padding: 5px var(--space-md) calc(5px + env(safe-area-inset-bottom, 0px));
  /* Sama seperti .note-topbar (layout.css) — background-color:
     var(--color-surface), BUKAN var(--color-bg), supaya kedua bar
     (atas & bawah) terasa satu keluarga warna. */
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 10px rgba(var(--shadow-color), 0.08);
  /* Selalu di-mount (tidak pernah `hidden`/display:none) supaya transform
     transition-nya selalu bisa jalan dua arah — lihat catatan di atas. */
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-standard);
  pointer-events: none;
}

.block-selection-bar.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

.block-selection-bar__actions {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
  /* Scrollbar-nya sendiri sudah disembunyikan global lewat base.css. */
}

/* Icon-only (tanpa label teks) — dibuat bulat & seukuran tombol batal
   (36x36) biar konsisten & area sentuhnya tetap nyaman di HP walau tanpa
   teks penjelas. */
.block-selection-bar__btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-instant) var(--ease-out);
}

.block-selection-bar__btn:hover {
  background-color: var(--color-accent-soft);
}

.block-selection-bar__btn:active {
  transform: scale(0.96);
  background-color: var(--color-accent-soft);
}

/* Dipasang oleh block-selection-bar.js selagi mode Select Block aktif
   (lihat block-select-mode.js) — beda dari :active (cuma sekejap saat
   ditekan), class ini menetap selama mode masih menyala supaya user tahu
   tombolnya sedang "on", sama seperti tombol toggle toolbar lain
   (.is-open) di aplikasi ini. */
.block-selection-bar__btn.is-active {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.block-selection-bar__btn svg {
  flex: 0 0 auto;
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Dipasang lewat atribut `disabled` native (lihat block-selection-bar.js
   update()) — dipakai untuk dua kasus: Select/Copy saat bar ini terbuka
   MURNI karena ada clipboard block menunggu (belum ada seleksi apa pun),
   dan Paste selagi resolusi asset-nya masih berjalan (isPasting). */
.block-selection-bar__btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Tombol batal (ikon X) — SENGAJA elemen terpisah setelah
   .block-selection-bar__actions (bukan bagian dari flex row yang sama),
   supaya justify-content: space-between di root men-dorongnya rata kanan
   sendiri, terpisah dari 3 aksi lain yang rata kiri. */
.block-selection-bar__cancel {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.block-selection-bar__cancel:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-text-primary);
}

.block-selection-bar__cancel:active {
  transform: scale(0.94);
}

/* Disamakan dengan ukuran ikon 3 tombol aksi di atas (var(--icon-md)) —
   sebelumnya ikon X ini cuma mengandalkan atribut width/height bawaan
   SVG-nya sendiri (16px, lihat ICON_CLOSE di block-selection-bar.js),
   jadi kelihatan lebih kecil & tidak senada dengan 3 ikon di sebelahnya. */
.block-selection-bar__cancel svg {
  width: var(--icon-md);
  height: var(--icon-md);
}