.cmf-settings-sidenav {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 166px);
}

.app-settings-list {
  min-height: 500px;
  margin-top: 16px;
  padding: 0;
}

.search-input {
  margin: 0 20px 0 28px;
}

.group-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;

  &:hover {
    .collapse-icon {
      opacity: 1;
    }
  }
}

.menu-group {
  cursor: default;
  user-select: none;

  position: relative;

  display: flex;
  gap: 3px;

  padding: 0 0 8px 28px;

  font: var(--menu-item-font);
  font-weight: 500;
  line-height: 16px;
  color: var(--menu-item-color);

  .label {
    cursor: pointer;
  }

  .collapse-icon {
    cursor: pointer;
    opacity: 0;
  }
}

.settings-item {
  cursor: pointer;

  display: flex;
  align-items: center;

  padding: 4px 10px 4px 47px;

  font: var(--menu-item-font);
  color: var(--menu-item-color);

  transition: all 0.2s;
}

.layout-container {
  width: 100%;
}

.settings-item:hover {
  background: var(--settings-hover-color-bg);
}

.settings-item.selected,
.settings-item.selected:hover {
  color: var(--menu-item-selected-color);
  background: var(--tree-selected-color);
}

.settings-module {
  height: calc(100vh - 60px);
  padding-top: 10px;

  &.displaced {
    height: calc(100vh - 100px); // delme
  }
}

app-cmf-icon {
  display: flex;
}

/* Т.к. в настройки подключен DocumentForm, у которого есть тулбар, необходимо компенсировать его высоту */
.settings-module:has(frm-cmf-document) {
  height: calc(100vh - 98px);
}