/* Styles for the classification scheme filter: the button that opens the drawer and the drawer itself.
   Every rule hangs from the 'classification-filter' host element to scope it to the component; the drawer
   content is transcluded, so it stays inside the host. */

classification-filter {
  display: block;
}

/* The opener fills the side filters column, like the other filter inputs */
classification-filter .classification-filter__open,
classification-filter .classification-filter__open > .md-btn {
  display: flex;
  width: 100%;
}

/* Drawer */
classification-filter .classification-filter__panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
}

classification-filter .classification-filter__header {
  padding: var(--md-spacing-xs) var(--md-spacing-mn);
}

classification-filter .classification-filter__title {
  margin: var(--md-spacing-none);
  color: var(--md-content-primary);
  font-family: var(--md-text-heading-sm-font-family);
  font-size: var(--md-text-heading-sm-font-size);
  font-weight: var(--md-text-heading-sm-bold-font-weight);
  line-height: var(--md-text-heading-sm-line-height);
  letter-spacing: var(--md-text-heading-sm-letter-spacing);
}

/* Header option ("no parent level"), above the cards */
classification-filter .classification-filter__header-option {
  display: flex;
  align-items: baseline;
  gap: var(--md-spacing-3xs);
}

classification-filter .classification-filter__header-option-text {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-4xs);
}

classification-filter .classification-filter__header-option-description {
  color: var(--md-content-disabled);
  font-family: var(--md-text-body-sm-font-family);
  font-size: var(--md-text-body-sm-font-size);
  font-weight: var(--md-text-body-sm-regular-font-weight);
  line-height: var(--md-text-body-sm-line-height);
  letter-spacing: var(--md-text-body-sm-letter-spacing);
}

classification-filter .classification-filter__empty {
  padding: var(--md-spacing-xs);
  color: var(--md-content-tertiary);
}

/* Applicable cards */
classification-filter .classification-filter__cards {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--md-spacing-xs);
  padding: var(--md-spacing-sm) var(--md-spacing-mn);
  overflow: auto;
}

classification-filter .classification-filter__card {
  padding: var(--md-spacing-3xs) var(--md-spacing-xs);
}

classification-filter .classification-filter__breadcrumb {
  margin-bottom: var(--md-spacing-3xs);
  color: var(--md-content-tertiary);
  font-size: var(--md-text-label-mn-font-size);
  line-height: 1;
}

classification-filter .classification-filter__checkbox,
classification-filter .classification-filter__count {
  flex-shrink: 0;
}

classification-filter .classification-filter__count {
  line-height: 1;
}

/* Collapsible subtree of the card; uib-collapse sets display, so flex is applied from ng-style */
classification-filter .classification-filter__children {
  flex-direction: column;
  gap: var(--md-spacing-4xs);
  margin-left: var(--md-spacing-2xs);
  padding-left: var(--md-spacing-3xs);
  border-left: var(--md-border-width-sm) solid var(--md-border-primary);
}

/* Footer */
classification-filter .classification-filter__footer {
  flex-shrink: 0;
  padding: var(--md-spacing-sm) var(--md-spacing-mn);
}

classification-filter .classification-filter__footer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--md-spacing-xs);
}