/*
 * 本心 Tathata — Theme Toggle Widget CSS
 *
 * 核心邏輯：
 *   - 預設顯示「淺色態」（.tathata-state--light），隱藏「深色態」
 *   - [data-theme="dark"] 時翻轉：顯示「深色態」，隱藏「淺色態」
 *
 * @version 1.0.0
 */

/* ── 基礎樣式 ── */
.tathata-theme-toggle {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  cursor:         pointer;
  border:         none;
  outline:        none;
  background:     rgba(140, 117, 88, 0.08);
  color:          var(--tathata-primary, #8C7558);
  padding:        10px 20px;
  border-radius:  var(--tathata-radius-sm, 2px);
  font-family:    var(--tathata-font-sans, sans-serif);
  font-size:      0.875rem;
  font-weight:    400;
  letter-spacing: 0.08em;
  transition:
    background var(--tathata-duration-fast, 150ms) var(--tathata-ease, ease),
    color      var(--tathata-duration-fast, 150ms) var(--tathata-ease, ease),
    transform  var(--tathata-duration-fast, 150ms) var(--tathata-ease, ease);
  -webkit-user-select: none;
  user-select:         none;
}

.tathata-theme-toggle:hover {
  background: var(--tathata-primary, #8C7558);
  color:      var(--tathata-surface, #FDFAF5);
  transform:  translateY(-1px);
}

.tathata-theme-toggle:focus-visible {
  outline:        2px solid var(--tathata-primary, #8C7558);
  outline-offset: 2px;
}

/* ── State visibility ── */

/* 預設：淺色態可見，深色態隱藏 */
.tathata-state--light { display: inline-flex; align-items: center; gap: inherit; }
.tathata-state--dark  { display: none;        align-items: center; gap: inherit; }

/* 深色模式：互換 */
[data-theme="dark"] .tathata-state--light { display: none; }
[data-theme="dark"] .tathata-state--dark  { display: inline-flex; }

/* 系統深色模式 fallback（未手動切換時） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tathata-state--light { display: none; }
  :root:not([data-theme="light"]) .tathata-state--dark  { display: inline-flex; }
}

/* ── Label ── */
.tathata-toggle-label {
  line-height: 1;
  white-space: nowrap;
}

/* ── Icon 對齊 ── */
.tathata-theme-toggle i,
.tathata-theme-toggle svg {
  display:     inline-block;
  line-height: 1;
  font-size:   1em; /* 繼承 icon_size control */
  flex-shrink: 0;
}

/* ── icon-only 模式 ── */
.tathata-toggle--icon-only {
  padding: 10px;
}
.tathata-toggle--icon-only .tathata-toggle-label {
  display: none;
}

/* ── text-only 模式 ── */
.tathata-toggle--text-only i,
.tathata-toggle--text-only svg {
  display: none;
}

/* ── Elementor editor 預覽：同時顯示兩個狀態（以 / 分隔） ── */
.elementor-editor-active .tathata-state--light,
.elementor-editor-active .tathata-state--dark {
  display: inline-flex !important;
}
.elementor-editor-active .tathata-state--dark::before {
  content: ' / ';
  display: inline-block;
  margin-right: 4px;
  opacity: 0.4;
}