@use "document-component.variables" as document-component-variables;

dso-responsive-element.dso-document-components {
  &[small] {
    dso-document-component {
      &::part(_annotation-container),
      &::part(_content) {
        padding-inline-start: document-component-variables.$indent;
      }

      &[not-collapsible] {
        &::part(_heading-container) {
          padding-inline-start: document-component-variables.$indent;
        }
      }

      &:not([not-collapsible]) {
        &::part(_children-container) {
          padding-inline-start: document-component-variables.$indent;
        }

        dso-document-component {
          margin-inline-start: document-component-variables.$indent * -1;
        }
      }
    }
  }

  &:not([small]) {
    dso-document-component {
      &[filtered] {
        &::before {
          inset-inline-start: calc((var(--depth) * #{document-component-variables.$indent} + 3px) * -1);
        }
      }

      &:not([not-collapsible]) {
        --b: calc(var(--depth) + 1);

        &::part(_annotation-container),
        &::part(_content),
        &::part(_children-container) {
          padding-inline-start: document-component-variables.$indent;
        }

        li {
          --a: var(--b);
        }
      }
    }
  }
}

dso-document-component[not-applicable] {
  opacity: 0.6;

  dso-document-component[not-applicable] {
    opacity: 1;
  }
}