app-cmf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.paginator {
  display: flex;
  justify-content: center;
}

.scroll-container {
  overflow: auto;

  /* TODO: нармально сверстать app-cmf-body чтобы не приходилось костылить высоту его контента (например задействовать flexbox); */
  height: calc(100% - 45px);
}

.objects-select {
  cursor: pointer;
  display: flex;
  margin-right: 10px;
  color: var(--color-gray-666);

  &.selected {
    font-weight: 500;
    color: var(--accent-color-bg);
  }
}

.breadcrumb-link {
  overflow: hidden;

  max-width: 250px;

  font-weight: 400;
  color: var(--color-gray-666);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    text-decoration: underline;
  }
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;

  width: 80%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5px;

  .bql {
    cursor: pointer;
    display: flex;
    font-weight: 500;
    color: var(--accent-color-bg);
  }

  .filter-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;

    margin-top: 36px;
    margin-bottom: 10px;

    .trigger {
      cursor: pointer;

      display: flex;
      align-items: center;
      align-self: flex-start;

      height: 36px;

      color: var(--color-href);
    }
  }

  .search-bar {
    display: flex;
    gap: 5px;
    align-items: center;

    margin-right: 20px;
    margin-bottom: 15px;
    padding: 4px 4px 4px 8px;

    border: solid 2px var(--accent-color-bg);
    border-radius: 5px;

    &.bql {
      border: solid 2px var(--color-gray-aaa);

      button {
        cursor: unset;
        background-color: var(--color-gray-aaa);
      }
    }

    &__input {
      flex: 1 1 auto;
      background-color: var(--color-gray-fff);
      border: none;
      outline: none;

      &::placeholder {
        color: #b1abab;
      }
    }

    button {
      cursor: pointer;

      padding: 3px 10px;

      color: #fff;

      background-color: var(--accent-color-bg);
      border: none;
      border-radius: 2px;
    }
  }

  .results {
    display: grid;
    grid-template-columns: 5fr 1fr 1fr 2fr;
    flex: 1 1 auto;
    gap: 10px;

    width: 100%;

    font-weight: 500;
    color: var(--default-color);

    app-cmf-icon {
      align-items: flex-start;
    }

    .header {
      padding-bottom: 10px;
    }

    .header,
    frm-cmf-breadcrumbs,
    .task-path {
      font-weight: 400;
      color: var(--color-gray-666);
    }

    .col {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: var(--color-gray-666);

      .name {
        display: flex;
        gap: 4px;
      }

      frm-cmf-breadcrumbs,
      .task-path {
        display: flex;
        gap: 5px;

        margin-left: 24px;

        font-size: 14px;
        color: #a0a0a0;
      }

      .task-path {
        display: flex;
        flex-wrap: wrap;

        span {
          overflow: hidden;
          max-width: 300px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .name {
        overflow: hidden;
        flex: 0 1 auto;

        font-size: 14px;
        color: var(--accent-color-bg);
        text-overflow: ellipsis;
      }

      .description {
        gap: 5px;
        margin-left: 24px;
      }
    }
  }
}

mat-paginator {
  display: flex;
}

:host ::ng-deep .mat-progress-spinner circle {
  stroke: var(--color-gray-666);
}

.mat-menu-item {
  height: 35px;
  line-height: 35px;
}

frm-filter-editor {
  max-width: 100%;

  ::ng-deep {
    .required-fields-wrapper {
      flex-wrap: wrap !important;
    }
  }
}

.checkbox-wrapper {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;

  padding: 8px;
}

.rating-menu-item {
  display: flex;
  gap: 4px;
  align-items: center;
}

::ng-deep .no-padding .mat-menu-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

::ng-deep {
  wg-filter-generic-list {
    max-width: 350px;
  }
}

::ng-deep {
  .item.status-item {
    .name {
      max-width: 200px;
    }
  }
}

.attachment-wrap {
  display: flex;
}

.attachment {
  cursor: pointer;

  display: flex;
  gap: 4px;
  align-items: center;

  max-width: 200px;
  margin-left: 24px;
  padding: 6px 8px;

  background-color: var(--color-gray-eee);
  border-radius: 8px;

  .attachment-icon {
    display: flex;
  }
}

.attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answer {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 54%;
  padding: 0 16px 10px;

  font-weight: 400;

  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 7%);

  &-container {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }

  &:hover {
    .toggle {
      opacity: 1;
    }
  }

  .debug {
    font-size: 12px;
    font-weight: 500;
  }

  .debug-hide {
    cursor: pointer;
    margin-bottom: 10px;
    color: var(--default-font-color);
  }
}

.toggle {
  cursor: pointer;
  user-select: none;
}

.debug {
  margin-left: 5px;
  color: var(--color-gray-aaa);
}