/* ========================================
   Settings Panel
   ======================================== */

#opus-price-builder-app .settings-panel {
  @apply flex flex-col h-full;
  @apply bg-surface border-l border-border;
  width: var(--size-sidebar-width);
}

#opus-price-builder-app .settings-panel__header {
  @apply flex items-center justify-between;
  @apply px-4 py-3 border-b border-border;
}

#opus-price-builder-app .settings-panel__title {
  @apply text-sm font-semibold text-text m-0;
  
}

#opus-price-builder-app .settings-panel__content {
  @apply flex-1 overflow-auto p-4;
}

#opus-price-builder-app .settings-panel__empty {
  @apply text-sm text-text-muted text-center py-8;
}

#opus-price-builder-app .settings-panel__section {
  @apply mb-6;
}

#opus-price-builder-app .settings-panel__section-title {
  @apply text-xs font-semibold text-text-muted uppercase tracking-wide mb-3;
}

#opus-price-builder-app .settings-panel__row {
  @apply flex flex-col gap-1.5 mb-4;
}

#opus-price-builder-app .settings-panel__row--inline {
  @apply flex-row items-center justify-between;
}

/* ========================================
   Settings Components
   ======================================== */

#opus-price-builder-app .settings-section {
  @apply space-y-3;
}

#opus-price-builder-app .settings-section__title {
  @apply text-xs font-semibold text-text-muted uppercase tracking-wide;
}

#opus-price-builder-app .settings-field {
  @apply flex flex-col gap-1;
}

#opus-price-builder-app .settings-field-inline {
  @apply flex items-center justify-between py-1;
}

#opus-price-builder-app .settings-label {
  @apply text-xs font-medium text-text block;
}

#opus-price-builder-app .settings-input {
  @apply h-8 px-2 text-sm rounded-md border border-border bg-surface w-full;
  @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1;
}

#opus-price-builder-app .settings-select {
  @apply h-8 px-2 text-sm rounded-md border border-border bg-surface;
  @apply focus:outline-none focus:ring-2 focus:ring-primary;
}

#opus-price-builder-app .settings-color-input {
  @apply flex gap-2 items-center;
}

#opus-price-builder-app .settings-color-picker {
  @apply w-8 h-8 rounded border border-border cursor-pointer;
  @apply appearance-none;

  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
  }
}

#opus-price-builder-app .settings-grid-2 {
  @apply grid grid-cols-2 gap-2;
}

#opus-price-builder-app .settings-grid-4 {
  @apply grid grid-cols-4 gap-2;
}

#opus-price-builder-app .settings-switch {
  @apply w-9 h-5 bg-surface-secondary rounded-full relative;
  @apply data-[state=checked]:bg-primary;
  @apply transition-colors duration-[--transition-fast];
}

#opus-price-builder-app .settings-switch-thumb {
  @apply block w-4 h-4 bg-white rounded-full shadow-sm;
  @apply transition-transform duration-[--transition-fast];
  @apply translate-x-0.5;

  [data-state="checked"] & {
    @apply translate-x-4;
  }
}

#opus-price-builder-app .settings-button-group {
  @apply flex flex-col gap-2;
}

#opus-price-builder-app .animation-group {
	  @apply flex flex-col gap-2;
}

#opus-price-builder-app .settings-modal-trigger {
  @apply flex items-center gap-2 w-full p-3;
  @apply bg-surface-secondary rounded-lg;
  @apply text-sm text-text;
  @apply hover:bg-border transition-colors;
  @apply cursor-pointer;
}

#opus-price-builder-app .settings-modal-trigger__preview {
  @apply ml-auto text-xs text-text-muted;
}

#opus-price-builder-app .settings-expand-btn {
  @apply text-xs text-text-muted hover:text-text;
  @apply cursor-pointer;
}

#opus-price-builder-app .settings-modal-btn {
  @apply w-full flex items-center gap-2 px-3 py-2;
  @apply bg-surface-secondary rounded-md border border-border;
  @apply text-sm text-text hover:bg-surface hover:border-primary/50;
  @apply transition-colors cursor-pointer;
}

#opus-price-builder-app .settings-modal-btn__preview {
  @apply ml-auto text-xs text-text-muted;
}

#opus-price-builder-app .settings-info-box {
  @apply p-2 bg-surface-secondary rounded-md;
}

/* ========================================
   Currency Settings
   ======================================== */

#opus-price-builder-app .currency-image-preview {
  @apply relative inline-flex items-center justify-center;
  @apply p-2 bg-surface-secondary rounded-lg border border-border;
}

#opus-price-builder-app .currency-image-preview__img {
  @apply max-w-full max-h-16 object-contain;
}

#opus-price-builder-app .currency-image-preview__remove {
  @apply absolute -top-2 -right-2;
  @apply flex items-center justify-center w-6 h-6;
  @apply bg-danger text-white rounded-full;
  @apply hover:bg-danger/80 transition-colors;
  @apply cursor-pointer;
}

#opus-price-builder-app .currency-preview {
  @apply flex items-center justify-center;
  @apply p-4 bg-surface-secondary rounded-lg;
  @apply min-h-[60px];
}

#opus-price-builder-app .currency-preview__symbol {
  @apply text-2xl;
}

#opus-price-builder-app .currency-preview__img {
  @apply max-h-10 object-contain;
}

/* ========================================
   Settings Sidebar Extra Styles
   ======================================== */

#opus-price-builder-app .settings-divider {
  @apply border-t border-border my-4;
}

#opus-price-builder-app .settings-textarea {
  @apply min-h-[80px] py-2 resize-y;
}

#opus-price-builder-app .settings-group {
  @apply mb-4;
}

#opus-price-builder-app .settings-row {
  @apply flex items-center justify-between;
}

#opus-price-builder-app .settings-hint {
  @apply text-xs text-text-muted mt-1;
}

#opus-price-builder-app .settings-warning {
  @apply flex items-start gap-2 p-3 mb-4;
  @apply bg-warning/10 text-warning border border-warning/20 rounded-md;
  @apply text-xs;
}

#opus-price-builder-app .settings-modal-trigger {
  @apply flex items-center justify-between w-full p-3;
  @apply bg-surface-secondary rounded-lg;
  @apply text-sm text-text;
  @apply hover:bg-border transition-colors;
  @apply cursor-pointer;
}

#opus-price-builder-app .settings-modal-trigger__preview {
  @apply flex items-center gap-1 text-xs text-text-muted;
}
