/* The bank's filter component, shared with the teacher taskbook. Typography is
   inherited from each workspace; the marks and tree geometry have one owner. */
.folio-discovery-filters {
  --folio-discovery-check-size: 15px;
  --folio-discovery-check-gap: 9px;
  --folio-discovery-check-radius: 4px;
  --folio-discovery-branch-radius: 5px;
  --folio-discovery-branch-inset: 7px;
  --folio-discovery-branch-padding: 13px;
  --folio-discovery-hover: rgb(29 32 30 / 5%);
}
.folio-discovery-filters .folio-skill-tree {
  max-height: none;
  overflow: visible;
}
.folio-discovery-filters .folio-filter-option {
  align-items: start;
  column-gap: var(--folio-discovery-check-gap);
  grid-template-columns: var(--folio-discovery-check-size) minmax(0, 1fr);
  line-height: 1.3;
  padding-block: var(--folio-primitive-space-4);
  cursor: pointer;
}
.folio-discovery-filters .folio-filter-option:hover > span {
  color: var(--folio-semantic-color-text-primary);
}
.folio-discovery-filters .folio-skill-group-head {
  align-items: start;
  gap: var(--folio-primitive-space-4);
}
.folio-discovery-filters .folio-skill-disclosure {
  border-radius: var(--folio-discovery-branch-radius);
  margin-top: var(--folio-primitive-border-thin);
  padding: calc(var(--folio-primitive-space-4) - var(--folio-primitive-border-thin));
}
.folio-discovery-filters .folio-skill-disclosure:hover {
  background: var(--folio-discovery-hover);
  color: var(--folio-semantic-color-text-primary);
}
.folio-discovery-filters .folio-skill-section {
  margin-top: var(--folio-primitive-space-4);
}
.folio-discovery-filters :is(.folio-skill-section > .folio-skill-groups, .folio-skill-group > .folio-skill-leaves) {
  border-left: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  margin-left: var(--folio-discovery-branch-inset);
  padding-left: var(--folio-discovery-branch-padding);
}
.folio-discovery-filters .folio-skill-branch > span { font-family: inherit; }
.folio-discovery-filters .folio-filter-option:has(input[type=checkbox]:disabled) {
  color: var(--folio-semantic-color-text-secondary);
  cursor: default;
}
.folio-discovery-filters .folio-filter-option:has(input[type=checkbox]:disabled) > span {
  color: var(--folio-semantic-color-text-secondary);
  opacity: .5;
}
.folio-discovery-filters .folio-filter-option input[type=checkbox] {
  appearance: none;
  background: var(--folio-semantic-color-background-content) center / 100% 100% no-repeat;
  border: var(--folio-primitive-border-thin) solid var(--folio-primitive-color-graphite-400);
  border-radius: var(--folio-discovery-check-radius);
  cursor: pointer;
  height: var(--folio-discovery-check-size);
  width: var(--folio-discovery-check-size);
  margin: 0;
}
.folio-discovery-filters .folio-filter-option input[type=checkbox]:disabled {
  border-color: var(--folio-semantic-color-border-subtle);
  cursor: default;
}
.folio-discovery-filters .folio-filter-option:hover input[type=checkbox]:not(:disabled) {
  border-color: var(--folio-semantic-color-text-primary);
}
.folio-discovery-filters .folio-filter-option input[type=checkbox]:checked {
  background-color: var(--folio-semantic-color-background-inverse);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f7f4eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E");
  border-color: var(--folio-semantic-color-background-inverse);
}
.folio-discovery-filters .folio-filter-option input[type=checkbox]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d201e' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E");
  border-color: var(--folio-semantic-color-text-primary);
}
.folio-discovery-filters .folio-filter-option.is-excluded input[type=checkbox] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d201e' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M5 5l6 6M11 5l-6 6'/%3E%3C/svg%3E");
  border-color: var(--folio-semantic-color-text-primary);
}
.folio-discovery-filters :is(button, input):focus-visible {
  outline: var(--folio-primitive-space-2) solid var(--folio-semantic-color-text-primary);
  outline-offset: var(--folio-primitive-space-2);
}
@media (max-width: 920px) {
  .workspace-taskbook .folio-filter-list > .folio-filter-group { padding-block: 0; }
}