@layer ll-service-extension.components {
  .ll-service-extension .ll-se-filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ll-se-space-3);
    align-items: end;
    min-inline-size: 0;
    padding: var(--ll-se-space-4);
    margin: 0;
    background: var(--ll-se-color-surface-raised);
    border: 0.0625rem solid var(--ll-se-color-border);
    border-radius: var(--ll-se-radius-md);
  }

  .ll-service-extension .ll-se-filter-controls__legend {
    padding-inline: var(--ll-se-space-2);
    color: var(--ll-se-color-text-primary);
    font-weight: 700;
  }

  .ll-service-extension .ll-se-filter-controls__fields {
    display: flex;
    flex: 1 1 30rem;
    flex-wrap: wrap;
    gap: var(--ll-se-space-3);
    min-inline-size: 0;
  }

  .ll-service-extension .ll-se-filter-controls__reset {
    min-block-size: 2.75rem;
    padding: var(--ll-se-space-2) var(--ll-se-space-4);
    color: var(--ll-se-color-text-primary);
    cursor: pointer;
    background: var(--ll-se-color-surface-subtle);
    border: 0.0625rem solid var(--ll-se-color-border-strong);
    border-radius: var(--ll-se-radius-sm);
  }

  .ll-service-extension .ll-se-filter-controls:disabled,
  .ll-service-extension .ll-se-filter-controls__reset:disabled {
    color: var(--ll-se-color-text-muted);
    cursor: not-allowed;
  }
}