:host {
  overflow: hidden;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;

  .scroll-wrapper {
    scrollbar-gutter: stable;

    overflow: auto;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 20px;

    padding-right: 20px;
    padding-bottom: 40px;
  }

  .settings {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;

    .filter-editor {
      flex: 8;
    }

    .group-mode-select {
      flex: 1;
    }
  }

  .flat-tree-node {
    .node-header {
      cursor: pointer;
      user-select: none;

      display: flex;
      gap: 4px;
      align-items: center;
      justify-self: flex-start;

      margin-bottom: 10px;

      .folder-name {
        user-select: none;
        margin: 0;
      }

      .folder-options {
        cursor: pointer;
        opacity: 0;
      }

      &:hover {
        .folder-options {
          opacity: 1;
        }
      }
    }
  }

  .breadcrumbs {
    display: flex;

    margin-bottom: 10px;
    margin-left: 20px;

    font-size: 12px;
    color: var(--color-gray-888);

    .breadcrumb:not(:last-child)::after {
      content: '/';
      padding: 0 4px;
    }
  }

  .table {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-left: 8px;
    padding-left: 10px;

    .header {
      padding: 0 var(--tui-padding-s);
      font-weight: 500;
    }
  }

  .management-panel {
    position: fixed;
    z-index: 1;
    bottom: 30px;

    width: stretch;
    padding-right: 30px;
  }
}

.row {
  display: grid;
  align-items: center;
  background-color: var(--app-bg-color-l1);

  .drag-handle {
    cursor: pointer;
  }

  .cell {
    display: flex;
    align-items: center;

    &.link {
      display: contents;
      color: unset;
    }

    span {
      width: 100%;
    }
  }

  .checklist-button {
    cursor: pointer;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 1;

    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.8;
    }
  }

  ::ng-deep mat-checkbox.checklist-button.mat-checkbox-checked .mat-checkbox-background {
    background-color: var(--accent-color-bg) !important;
  }

  ::ng-deep .mat-checkbox.checklist-button .mat-checkbox-frame {
    border-color: var(--accent-color-bg) !important;
  }
}

.cdk-drag-placeholder {
  opacity: 0;
}

app-cmf-icon,
app-cmf-doodle-icon {
  display: flex;
}