@use '../variables.scss' as vars;

$cubeSize: 10px;
$nodeIconSize: 16px;

:host {
  @include vars.grad;
  @include vars.value;

  display: contents;

  .value {
    width: 100%;
  }

  .column {
    @include vars.gridColumn;

    position: relative;
    flex-wrap: nowrap;
    padding-right: 10px;

    .cube {
      display: inline-block;

      width: $cubeSize;
      min-width: $cubeSize;
      height: $cubeSize;
      margin-right: 5px;

      border-radius: 2px;
    }

    .chevron {
      display: inline-block;
      width: vars.$chevronWidth;
      min-width: vars.$chevronWidth;
      margin-right: 3px;
    }

    .node-icon {
      display: inline-flex;

      width: $nodeIconSize;
      min-width: $nodeIconSize;
      max-width: $nodeIconSize;
      height: $nodeIconSize;
      min-height: $nodeIconSize;
      max-height: $nodeIconSize;
      margin-right: 5px;
    }

    .name {
      overflow: hidden;

      max-width: 100%;

      color: vars.$defaultTextColor;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.mass-task-edit-mode {
      mat-checkbox {
        padding-bottom: 2px;
        padding-left: 4px;
      }
    }
  }
}

:host ::ng-deep {
  app-cmf-inline-edit {
    .inline-edit-wrap .inline-edit .inline-edit-text.prewrap {
      white-space: nowrap;
    }
  }
}