/**
 * Filament Filter Bar Styles
 * Responsive filter layout for kiosk and mobile
 */

$spacing-unit: 8px;

.filament-filter-bar {
  display: flex;
  align-items: center;
  gap: $spacing-unit * 2;
  flex-wrap: wrap;
  padding: $spacing-unit * 2 0;
  margin-bottom: $spacing-unit * 2;
}

// Form field sizing
.filter-field {
  flex: 0 1 auto;
  min-width: 160px;

  &.material-filter {
    min-width: 200px;
  }

  &.color-filter {
    min-width: 180px;
  }

  // Reduce vertical spacing inside filter fields
  .mat-mdc-form-field-subscript-wrapper {
    display: none; // No hint/error text needed for filters
  }
}

// Selected material chips
.selected-chips {
  flex-wrap: wrap;
  gap: 4px;
}

.filter-chip {
  font-size: 12px !important;
  min-height: 24px !important;

  mat-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
  }
}

// Active filter icon
.filter-active-icon {
  color: var(--mat-sys-primary);
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}

// Checkbox styling
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  user-select: none;
  touch-action: manipulation; // Prevent zoom on double-tap

  .checkbox-icon {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--mat-sys-on-surface-variant);
    transition: color 0.2s ease;

    &.active {
      color: var(--mat-sys-primary);
    }
  }
}

// Clear filters button
.clear-filters-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;

  mat-icon {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
  }
}

// Responsive: stack filters vertically on small screens
@media (max-width: 768px) {
  .filament-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: $spacing-unit;
  }

  .filter-field {
    width: 100%;
    min-width: unset;

    &.material-filter,
    &.color-filter {
      min-width: unset;
    }
  }

  .filter-checkbox {
    padding: $spacing-unit 0;
  }

  .clear-filters-btn {
    align-self: flex-start;
  }
}

// Extra-small screens (phone portrait)
@media (max-width: 480px) {
  .filament-filter-bar {
    padding: $spacing-unit 0;
    margin-bottom: $spacing-unit;
  }

  .filter-checkbox {
    font-size: 13px;
  }
}