.ks-inline-edit {
  &__controls {
    line-height: 1rem;
    vertical-align: middle;
    padding-left: var(--space-xs);

    display: none;
  }
}

.ks-inline-edit--visible {
  .ks-inline-edit__text {
    vertical-align: middle;
  }

  .ks-inline-edit__controls {
    display: inline-block;
  }
}

.ks-inline-edit--editing {
  .ks-inline-edit__text {
    border-bottom: solid var(--space-xxxs) var(--c-active);
    outline: none;
  }

  .ks-inline-edit__controls {
    display: inline-block;

    button + button {
      margin-left: var(--space-xxs);
    }
  }
}

.ks-inline-edit--no-wrap {
  display: inline-flex;
  align-items: center;
  max-width: 100%;

  .ks-inline-edit__text {
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    // required when truncating text in flexbox:
    // https://css-tricks.com/flexbox-truncated-text/
    min-width: 0;
  }

  .ks-inline-edit__controls {
    min-width: var(--space-l);
    white-space: nowrap;
  }
}