p5.js-web-editor/client/styles/components/_editable-input.scss

.editable-input {
  height: 70%;
  display: flex;
  align-items: center;
}

.editable-input__label {
  display: flex;

  @include themify() {
    color: getThemifyVariable('inactive-text-color');
    &:hover {
    color: getThemifyVariable('primary-text-color');
      & .editable-input__icon path {
        fill: getThemifyVariable('primary-text-color');
      }
    }
  }
  cursor: pointer;
  line-height: #{18 / $base-font-size}rem;

  font-size: unset;
  font-weight: unset;
}

.editable-input__icon svg {
  width: 1.5rem;
  height: 1.5rem;

  @include themify() {
    path {
      fill: getThemifyVariable('inactive-text-color');
    }
  }
}

.editable-input:hover {
  @include themify() {
    .editable-input__icon path {
      fill: getThemifyVariable('primary-text-color');
    }
  }
}

.editable-input--is-not-editing .editable-input__input,
.editable-input--is-editing .editable-input__label {
  display: none;
}

.editable-input--is-editing .editable-input__input,
.editable-input--is-not-editing .editable-input__label {
  display: block;
}