@import "../../../shared/ui-components/styles/variables";

:host {
  form.editable, .table-container {
    height: 100%;
    padding-bottom: 6px;
  }

  form.editable {
    padding-bottom: 6px;
  }

  .form-container {
    height: 100%;
    overflow: auto;

    input.highlight-text {
      background: $neon-yellow-betterinchrome;
      &.current-match {
        background: #f5d655;
      }
    }
  }

  mat-form-field {
    width: 42%;
    padding-right: 12px;
  }

  ::ng-deep tr:hover {
    cursor: auto !important;
    transition: background-color 0.3s;
  }

  .separator {
    width: 100%;
    //border-bottom: solid 1px #dee1e9;
  }

  .remove-step {
    margin: .25em 0;
    padding-bottom: 1.34375em;
    padding-top: 7px;
    display: flex;
    align-items: center;
  }

  .param-row {
    font-weight: 500;

    & > div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .highlight-text {
    color: $blue-600;
  }

  .name {
    font-weight: 500;
  }

  .allow-multi-space {
    white-space: pre;

  }

  .add-parameter {
    border: 1px solid $grey-purple;
    background-color: #ffffff;
    color: $grey-purple;
    transition: all ease-in-out 0.15s, border ease-in-out 0.15s;
  }
}