<ng-container *transloco="let t; prefix: 'readerEbook.quickSettings'">
<div class="quick-settings-overlay" (click)="onOverlayClick()">
  <div class="quick-settings-panel" (click)="$event.stopPropagation()">
    <div class="pointer"></div>
    <div class="panel-body">
      <!-- Dark Mode -->
      <div class="control">
        <label>{{ t('darkMode') }}</label>
        <div class="control-right">
          <span class="mode-icon sun" [class.active]="!isDarkMode">&#9728;&#65039;</span>
          <button class="switch" [class.active]="isDarkMode" (click)="toggleDarkMode()">
            <span class="slider"></span>
          </button>
          <span class="mode-icon moon" [class.active]="isDarkMode">&#127769;</span>
        </div>
      </div>

      <!-- Font Size -->
      <div class="control">
        <label>{{ t('fontSize') }}</label>
        <div class="control-right">
          <div class="stepper">
            <button (click)="decreaseFontSize()">&#8722;</button>
            <span>{{ state.fontSize }}%</span>
            <button (click)="increaseFontSize()">+</button>
          </div>
        </div>
      </div>

      <!-- Line Spacing -->
      <div class="control">
        <label>{{ t('lineSpacing') }}</label>
        <div class="control-right">
          <div class="stepper">
            <button (click)="decreaseLineHeight()">&#8722;</button>
            <span>{{ state.lineHeight | number:'1.1-1' }}</span>
            <button (click)="increaseLineHeight()">+</button>
          </div>
        </div>
      </div>
    </div>

    <div class="panel-footer">
      <button class="more-settings-btn" (click)="onOpenFullSettings()">
        <app-reader-icon name="settings" [size]="16"></app-reader-icon>
        <span>{{ t('moreSettings') }}</span>
      </button>
    </div>
  </div>
</div>
</ng-container>
