@import url('/css/features/document-search.css');

/* Document search is a self-contained control panel in the Civic Rural theme. */
.mr-document-search {
  --mr-doc-search-accent: var(--mr-color-primary);
  --mr-doc-search-accent-soft: color-mix(in srgb, var(--mr-color-primary) 10%, transparent);
  --mr-doc-search-text: var(--mr-color-text);
  --mr-doc-search-muted: var(--mr-color-body-dark);
}

.mr-document-search-head {
  gap: 1rem;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border: 1px solid var(--mr-rural-line);
  border-radius: 24px;
  background: #fffdf8;
}

.mr-document-search-input-wrap {
  min-height: 60px;
  padding: 0rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--mr-color-primary) 38%, var(--mr-rural-line));
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mr-color-primary) 8%, transparent);
}

.mr-document-search-input-wrap:focus-within {
  border-color: var(--mr-color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mr-color-primary) 18%, transparent);
}

.mr-document-search-input-icon {
  color: var(--mr-color-primary);
}

.mr-document-search-filter {
  min-height: 44px;
  padding: .55rem 1rem;
  border-color: var(--mr-rural-line);
  background: #fffdf8;
  color: var(--mr-color-text);
}

.mr-document-search-filter:hover,
.mr-document-search-filter:focus-visible {
  border-color: var(--mr-color-primary);
  background: color-mix(in srgb, var(--mr-color-primary) 8%, #fffdf8);
}

.mr-document-search-filter.is-active {
  border-color: var(--mr-color-primary-shade);
  background: var(--mr-color-primary);
  color: var(--mr-color-primary-contrast);
}

.mr-document-search-filter-count {
  background: color-mix(in srgb, var(--mr-color-primary) 10%, #fffdf8);
  color: inherit;
}

.mr-document-search-filter.is-active .mr-document-search-filter-count {
  background: color-mix(in srgb, var(--mr-color-primary-contrast) 18%, transparent);
}

@media (max-width: 640px) {
  .mr-document-search-head {
    padding: 1rem;
    border-radius: 16px;
  }

  .mr-document-search-input-wrap {
    min-height: 58px;
  }
}