:host {
  display: block;
}

.context-actions {
  --context-action-height: 35.5px;

  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;

  margin-top: 12px;
}

.context-selects {
  display: flex;
  flex: 0 1 auto;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;

  min-width: 0;
  margin-left: auto;
}

.context-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.logic-type-control {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 360px;
}

.context-control {
  flex: 0 1 auto;
}

wg-field.context-control[data-direction='column'] {
  width: max-content;
  min-width: 100px;
}

.context-control_project {
  min-width: 100px;
  max-width: 160px;
}

.context-control_list {
  max-width: 180px;
}

wg-field.context-control_list[data-direction='column'] {
  max-width: 180px;
}

.project-placeholder,
.project-value {
  overflow: hidden;
  display: block;

  min-width: 0;
  max-width: 100%;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-placeholder {
  color: var(--color-gray-888);
}

:host ::ng-deep .context-control .cmf-view-wrapper-ctr:not(.edit-mode),
:host ::ng-deep .context-control .cmf-view-wrapper-ctr:not(.edit-mode) wg-readonly-view {
  max-width: 100%;
  height: var(--context-action-height);
  max-height: var(--context-action-height);
}

:host ::ng-deep .context-control .cmf-view-wrapper-ctr:not(.edit-mode) wg-readonly-view {
  --tui-height: var(--context-action-height);

  min-height: var(--context-action-height);
  max-height: var(--context-action-height);
  border-radius: 4px;
}

:host ::ng-deep .context-control .cmf-view-wrapper-ctr:not(.edit-mode) wg-readonly-view[data-appearance='fill'] {
  color: var(--color-href);
  background-color: rgb(68 132 216 / 10%);
}

:host ::ng-deep .context-control .cmf-view-wrapper-ctr:not(.edit-mode) .content {
  max-width: 100%;
}

:host ::ng-deep .context-control .cmf-view-wrapper-ctr .t-content,
:host ::ng-deep .context-control .cmf-view-wrapper-ctr tui-input-tag,
:host ::ng-deep .context-control .cmf-view-wrapper-ctr tui-primitive-textfield {
  --tui-height-m: var(--context-action-height);
  --tui-height: var(--context-action-height);
}

:host ::ng-deep .context-control .cmf-view-wrapper-ctr:not(.edit-mode) .edit-icon-container {
  display: none;
}

:host ::ng-deep .context-control .cmf-view-wrapper-ctr.edit-mode {
  min-width: 100px;
}

:host ::ng-deep .context-control_project .cmf-view-wrapper-ctr.edit-mode {
  max-width: 160px;
}

:host ::ng-deep .context-control_list .cmf-view-wrapper-ctr.edit-mode {
  max-width: 180px;
}

.validation-error {
  padding: 2px 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-alert-red);
}